1.設置彈性布局
display:flex;
display:inline-flex;
2.設置排列方式
flex-direction:row/column/row-reverse/column-reverse
3.溢出換行
flex-wrap:wrap/wrap-reverse
4.統(tǒng)一設置元素排列方式與換行
flex-flow:column wrap
5.控制主軸的對齊方式
justify-content:flex-star/flex-end/center/space-between/space-around/space-evenly;
6.交叉軸的排列方式
align-items:flex-star/flex-end/center/space-between/space-around/space-evenly/stretch(拉抻);
7.彈性元素交叉軸控制
align-self:flex-star/flex-end/center/space-between/space-around/space-evenly/stretch(拉抻)
8.元素可用空間分配
flex-grow:0,1,2,3...
9.元素動態(tài)縮小的處理技巧
flex-shrink:0(不縮小)卓箫,1,2,3.膊畴。。冈止。
10.主軸的基本尺寸定義
flex-basis:數(shù)字px
優(yōu)先級:max-height > flex-basis > height
11.組合屬性
flex-grow:1;
flex-shrink:2;
flex-basis:100px;
可以寫成:flex:1 2 100px;
12.控制彈性元素的排列
order:1;