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

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

.box{

  display: flex;

}

行內元素也可以使用Flex布局。

.box{

  display: inline-flex;

}

一，容器的6個屬性：

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

row（默認值）：主軸為水平方向，起點在左端（項目從左往右排列）。

row-reverse：主軸為水平方向，起點在右端（項目從右往左排列）。

column：主軸為垂直方向，起點在上沿（項目從上往下排列）。

column-reverse：主軸為垂直方向，起點在下沿（項目從下往上排列）。

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

nowrap（默認）：不換行（列）。

wrap：主軸為橫向時，從上到下換行。主軸為縱向時，從左到右換列。

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

3.flex-flow

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

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

flex-start（默認）：與主軸的起點對齊。

flex-end：與主軸的終點對齊。

center：與主軸的中點對齊。

space-between：兩端對齊主軸的起點與終點，項目之間的間隔都相等。

space-around：每個項目兩側的間隔相等。

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

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

二，設置在項目上的屬性：

1.order：定義項目的排列順序。數值越小，排列越靠前，默認為0。

2.flex-grow屬性定義項目的放大比例，默認為0。

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

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

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

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