Flex布局又稱彈性布局，它使用flexbox使得容器有了彈性，更加適應(yīng)各種設(shè)備的不同寬度，而不必依賴于傳統(tǒng)的塊狀布局和浮動定位。

是CSS3中新增的規(guī)范。任何一個(gè)容器都可以指定為Flex布局。

.box{

  display: flex;

}

行內(nèi)元素也可以使用Flex布局。

.box{

  display: inline-flex;

}

一，容器的6個(gè)屬性：

1. flex-direction：用于設(shè)置主軸的方向。它有四個(gè)取值：

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端（項(xiàng)目從左往右排列）。

row-reverse：主軸為水平方向，起點(diǎn)在右端（項(xiàng)目從右往左排列）。

column：主軸為垂直方向，起點(diǎn)在上沿（項(xiàng)目從上往下排列）。

column-reverse：主軸為垂直方向，起點(diǎn)在下沿（項(xiàng)目從下往上排列）。

2.flex-wrap：用于定義彈性容器里如何換行。它有三個(gè)取值：

nowrap（默認(rèn)）：不換行（列）。

wrap：主軸為橫向時(shí)，從上到下?lián)Q行。主軸為縱向時(shí)，從左到右換列。

wrap-reverse：主軸為橫向時(shí)：從下到上換行。主軸為縱向時(shí)：從右到左換列。

3.flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。

4 justify-content屬性：定義了項(xiàng)目在主軸上的對齊方式。

flex-start（默認(rèn)）：與主軸的起點(diǎn)對齊。

flex-end：與主軸的終點(diǎn)對齊。

center：與主軸的中點(diǎn)對齊。

space-between：兩端對齊主軸的起點(diǎn)與終點(diǎn)，項(xiàng)目之間的間隔都相等。

space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。

5. align-items：定義在交叉軸上彈性項(xiàng)的對齊方式。取值與justify-content相同。

6.align-content：定義了多根軸線相對于交叉軸的對齊方式。取值與justify-content相同。默認(rèn)值為stretch：主軸線占滿整個(gè)交叉軸。

二，設(shè)置在項(xiàng)目上的屬性：

1.order：定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

2.flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0。

3.flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。負(fù)值對該屬性無效。如果flex-shrink值為0，表示該項(xiàng)目不收縮。

4.flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。

5.flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，后兩個(gè)屬性可選。

6.align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。