一.什麼是flex（fixible box）佈局
Flex是Flexible Box的縮寫，顧名思義爲“彈性佈局”，用來爲盒裝模型提供最大的靈活性。任何一個容器都可以指定爲Flex 佈局。
eg.
(1)任何一個容器都可以指定爲Flex 佈局。
.box{
disply:flex;
}
(2)行內元素也可以使用Flex佈局。
.box{
display:inline-flex;
}
(3)webkit內核的瀏覽器，必需加上-webkit前綴
.box{
display:-webkit-flex;
}
(Chrome瀏覽器,Apple Safari瀏覽器，搜狗高速瀏覽器 )
**注意：**設爲flex佈局以後，子元素的float、clear和vertical-align屬性將失效
二.flex的四大概念
1.容器：flex的佈局元素稱爲flex容器。如果在一個盒子上面，設置display:flex，那麼這個盒子就是一個容器.
容器的六大屬性：
（1）flex-direction：決定主軸的方向（即項目的排列方向）
.box{
flex-direction:row | row-reverse | column | column-reverse;
}
row（默認值）：主軸爲水平方向，起點在左端
row-reverse:主軸爲水平方向，起點在右端
column:主軸爲垂直方向，起點在上沿
column-reverse:主軸爲垂直方向，起點在下沿
（2）flex-wrap：默認情況下，項目都排在一條線（又稱“軸線”）上。flex-wrap屬性定義是否換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}*
nowrap（默認）：不換行
wrap:換行，第一行在上方
wrap-reverse:換行，在第一行的下方
(3)flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認 row nowrap。
(4)justify-content justify-content屬性定義了項目在主軸上的對齊方式
flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between:兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
(5)align-items align-items屬性定義項目在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
(6)align-content align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。
2.項目： 容器的所有直接子元素，叫項目.
order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0.
flex-grow屬性定義項目的放大比例，默認值爲0，即如果存在剩餘空間，也不放大。
flex-shrink屬性定義了項目的縮小比例，默認爲1，即如果空間不足，改項目將縮小。
flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。它可以設爲跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值爲0 1 auto。後面兩個屬性可選.改屬性有兩個快捷值：auto（1 1 auto）和none（0 0 auto）.建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因爲瀏覽器會推算相關值.
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，等同於stretch。
3.主軸（main axis）：在容器中，項目默認是按主軸方向排列，默認是從左向右排列.主軸的開始位置（與邊框 的交叉點）叫做main start，結束位置叫做main end。
4.交叉軸（cross axis）：與主軸垂直的那個軸.水平的主軸和垂直的交叉軸。交叉軸的開始位置叫做cross start，結束位置叫做cross end