标题：【原生javascript项目】FlexPanel05日期：2021-11-1720:10:40标签：原生javascript项目分类：30个原生javascript项目介绍一动态投影网页，知识点主要涉及flex容器和元素点击事件。效果网址：https://janice143.github.io/f...正文1.html部分主要由5个div元素组成将网页分成5块，横向排列。每个div元素中有3个p标签，分别对应三个段落。
嘿
让我们
跳舞
标题：【原生javascript项目】FlexPanel05日期：2021-11-1720:10:40标签：原生javascript项目分类：30个原生javascript项目介绍一动态投影网页，知识点主要涉及flex容器和元素点击事件。效果网址：https://janice143.github.io/f...正文1.html部分主要由5个div元素组成将网页分成5块，横向排列。每个div元素中有3个p标签，分别对应三个段落。
嘿
让我们
跳舞
Give
Take
Receive
体验
它
今天
给
全部
你可以
Life
In
Motion
二、css代码的css部分主要是实现5个div元素的水平统一排列，每个div元素都有对应的背景图片和3个p标签的文字P标签文本在每个div元素中也是左右居中，上下均匀排列。主要是使用flex容器来实现的。1Flex容器参考网址：https://www.ruanyifeng.com/bl...采用Flex布局的元素称为flex容器，简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器的属性：flex-direction：项目的排列方向flex-wrap：默认情况下，项目排列在一条线上（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。flex-flow：flex-direction属性和flex-wrap属性的缩写形式justify-content：项目在主轴上的对齐方式align-items：项目如何在横轴上对齐align-content：定义多个轴的对齐方式item的属性：order：item的排列顺序，值越小排列越高flex-grow：定义item的放大比例，默认为0flex-shrink：item的收缩比例，默认为1flex-basis：item占用的主轴空间flex：flex-grow、flex-shrink和flex-basis的简写，默认值为01autoalign-self：允许单个item有不同的空间与其他项目对齐，可以覆盖align-items属性2cssfont