flex

flex

 

 一,容器属性

flex

 

 1,flex-direction

flex

 

 2,flex-wrap

默认会缩小Item。

flex

 

 

3,justify-content

justify-content:把所有元素打包一块放到中间。

flex

 

 4, 轴向的对齐方式

flex

 5, align-content (不常用,多行,多轴的时候对齐方式)

flex

 二、项目属性

flex

 

 项目属性用的不是非常多,有时候特殊情况也会用。

1,order

flex

 

 2, flex-grow

flex-grow填满剩余空间的比例分配。

flex

 

 3,flex-shrink

典型例子。一个项目的flex-shrink属性为0,其余为默认1,那么空间不足时,其他都缩小,该项目不缩小。

flex

 

4,flex-basis(复杂,但是用的很少)

 

flex

 

 5,align-self 脱离团队,自己定位

flex

 

https://www.bilibili.com/video/BV1t7411E7tn?spm_id_from=333.999.0.0

上一篇:CSS文本样式


下一篇:内存对齐算法