Properties for the Parent（應(yīng)用在父元素上）
(flex 盒子)
display: flex
定義父元素為flex元素
flex-direction
子元素的排列方向
-
row (默認值): 從主軸起點到到主軸終點
Paste_Image.png -
row-reverse: 從主軸終點到主軸起點
Paste_Image.png -
column: 從側(cè)軸起點到側(cè)軸終點
Paste_Image.png -
column-reverse:從側(cè)軸終點到側(cè)軸起點
Paste_Image.png
flex-wrap
子元素在主軸上鋪滿時，是否換行
- Nowrap（默認值）:不換行
- Wrap:換行且從頂部到到底部排列
- Wrap-reverse:換行且從底部到到頂部排列
flex-flow:flex-direction屬性值 flex-wrap屬性值;
justify-content
主軸方向?qū)R方式
定義了沿著主軸對齊。
它幫助分賠剩下多余的空閑空間給所有的flex項目。
- flex-start (默認值): flex項目從主軸起點開始無空閑空間地排列在一起
- flex-end: flex項目從主軸終點開始無空閑空間地排列在一起
- center: flex項目排列在主軸中間，兩邊空閑空間均勻分批
- space-between: 在主軸上的空閑空間均勻地分配到每兩個flex項目中間
- space-around: 在主軸上的空閑空間均勻地分配到每個flex項目兩邊
align-items
側(cè)軸對齊方式
stretch (默認值):把所有的元素伸開，所有flex項目的高度以最高的flex項目為準(zhǔn)
- flex-start: 在主軸上排列的flex項目頂部，對齊側(cè)軸的起點
- flex-end: 在主軸上排列的flex項目底部，對齊側(cè)軸的終點
- center: 在主軸上排列的flex項目中部，對齊側(cè)軸的中間
- baseline: flex項目延文本基線對齊
align-content
當(dāng)出現(xiàn)多行flex項目時，側(cè)軸方向?qū)R方式
- stretch (默認值): flex盒子和flex項目沒設(shè)置高度時，盒子高度以高度最高的flex項目為準(zhǔn)
- flex-start: 多行flex項目頂部對準(zhǔn)側(cè)軸起點
- flex-end: 多行flex項目底部對準(zhǔn)側(cè)軸終點
- center: 多行flex項目中部對準(zhǔn)側(cè)軸中間，空閑空間均勻分配打破多行flex項目兩邊
- space-between:側(cè)軸方向上，空閑空間均勻分配到每兩行flex項目的中間
- space-around: 側(cè)軸方向上，空閑空間均勻分配到每行flex項目的兩邊
Properties for the Children（應(yīng)用在所有的子元素上）
(flex 項目)
Order：整數(shù)編號;
可以正負符號，設(shè)置子元素排列的先后順序號
flex-grow：
如果只有一個子元素設(shè)置了flex-grow的值，則這個子元素分配剩下的所有的空閑空間
如果多個子元素設(shè)置了flex-grow的值，則按照值的比例來分配剩下的空閑空間
flex-shrink
按照子元素設(shè)置的flex-shrink值，來按比例收縮flex項目
flex-basis
設(shè)置flex項目的寬度大小，可以是比例也可以是長度單位
如果設(shè)置為0,內(nèi)容不考慮周圍的額外空間
如果設(shè)置為自動,對其flex-grow值的額外的空間進行分配
Flex:flex-grow flex-shrink flex-basis;
這是縮寫flex-grow,flex-shrink flex-basis總和。第二個和第三個參數(shù)(flex-shrink和flex-basis)是可選的。默認是0 1。
