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。
