一、定義及思想

定義：彈性布局盒模型
思想：給予容器控制內(nèi)部元素高度和寬度的能力

二、兼容性

移動端可以使用
注意加上前綴

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
display: -webkit-flex;
display: flex;

三、概念示意圖

• 容器container設(shè)置：display:flex
• 內(nèi)部元素自動成為flex項目item
• container擁有兩條隱形的軸：main axis(水平主軸) 和 cross axis(豎直交叉軸)
• item按主軸或交叉軸排列，在主軸方向占據(jù)的寬度為main size，在交叉軸方向占據(jù)的寬度為cross size
• 注意點：flex容器內(nèi)元素item的float、clear、vertical-align均失效

四、容器屬性詳解

1、flex-direction

決定主軸方向

~屬性值

• row(默認(rèn))：主軸水平，從左到右
• column：主軸豎直，從上到下
• row-reverse：主軸水平，從右到左
• column-reverse：主軸豎直，從下到上

2、flex-wrap

決定當(dāng)一行排列不下時，是否換行

• nowrap(默認(rèn))：自動縮小項目，不換行
• wrap：換行，且第一行在上方
• wrap-reverse：換行，且第一行在下方

3、flex-flow

flex-direction和flex-wrap的結(jié)合寫法

默認(rèn)值：row nowrap

4、justify-content

決定item在主軸上的對齊方式

• flex-start(默認(rèn))：左對齊
• flex-end：右對齊
• center：主軸方向居中對齊
• space-between：兩端對齊
• space-around： 沿軸線均勻分布

5、align-items

決定item在交叉軸上的對齊方式

• flex-start(默認(rèn))：頂端對齊
• flex-end：底部對齊
• center：交叉軸方向居中對齊
• baseline： item第一行文字的底部對齊
• stretch：當(dāng)item未設(shè)置高度時，item將和容器等高對齊

6、align-content

當(dāng)有多條主軸、item不止一行時，決定多行在交叉軸上的對齊方式。定義此屬性后，align-items將失效

• flex-start(默認(rèn))：頂端對齊
• flex-end：底部對齊
• center：交叉軸方向居中對齊
• space-between：交叉軸方向兩端對齊
• space-around： 沿交叉軸均勻分布
• stretch：當(dāng)item未設(shè)置高度時，沿交叉軸拉伸寬度并占滿

五、內(nèi)部元素屬性詳解

1、order

值為整數(shù)，默認(rèn)為0，值越小，排列越靠前

2、flex-grow

定義當(dāng)容器有多余空間時，item是否放大
默認(rèn)值為0，不放大
值為整數(shù)，表示item的放大比例

3、flex-shrink

定義當(dāng)容器空間不足時，item是否縮小
默認(rèn)值為1，自動縮小
值為整數(shù)，表示item的縮小比例

4、flex-basis

表示item在主軸上占據(jù)的空間，默認(rèn)值為auto

5、flex

flex-grow、flex-shrink、flex-basis簡寫

6、align-self

允許item有自己獨特的交叉軸上的對齊方式

• auto(默認(rèn))：繼承父元素align-items
• flex-start: 頂部對齊
• flex-end：底部對齊
• center：交叉軸方向居中對齊
• baseline： item第一行文字的底部對齊
• stretch：當(dāng)item未設(shè)置高度時，item將和容器等高對齊