flex弹性布局？

小柒 2021-12-07 15:47

1.设置盒子的display属性为flex，或者line-flex，其对应还有六个css属性，分别为：

1）flex-direction：设置子元素的排列方式（row，column，row-reverse，column-reverse）

2）flex-warp：设置子元素的是否换行（nowarp，warp，warp-reverse）

3）flex-flow：flex-direction和flex-warp的缩写，默认为row nowarp

4）justify-content：设置子元素的水平排列方式（flex-start，flex-end，center，span-around，span-between）

5）align-items：设置子元素的垂直方式（flex-start，flex-end，center，stretch，baseline）

6）align-content：设置多个轴线的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）

\2. 对应的子元素项目也拥有自身的六个css属性，分别为：

1）order：设置元素的排列权重值越大越在后

2）flex-grow：设置元素的放大比例

3）flex-shrink：设置元素的缩小比例

4）flex-basis：设置多余空间项目主轴所占比例空间

5）flex：flex-grow和flex-shrink和flex-basis的缩写方式默认为0 1 auto

6）align-self：设置子元素自己的垂直排列方式，默认为盒子的align-items的值

：设置flex布局后，子元素的float，clear，vertical-align都无效