H5開發開發利器——flex

距離新建這篇文章已經好幾個月了，今天有終於有時間來完善這篇文章了...
flexbox即彈性佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了大部分瀏覽器的支持。
flexbox共經歷了三個階段的變化：
(1)W3C 2009年第1次草案：display:box
(2)W3C 2011年第2次草案：display:flexbox
(3)W3C 2012年第3次草案：display:flex(當前階段版本)

首先來看張圖瞭解下幾個基本的概念：

採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱」容器」。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱」項目」。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

任何一個元素均可以只能爲flex佈局，其能夠水平佈局也能夠垂直佈局(經過設置flex-direction：row／columnl來設置)，設置元素爲flex 佈局後咱們還能夠根據不一樣的需求在該元素上設置一下幾種屬性(容器屬性)：
(1)flex-direction屬性決定主軸的方向（即項目的排列方向）

值範圍：flex-direction: 
                        row             （默認值）：主軸爲水平方向，起點在左端
                        row-reverse      主軸爲水平方向，起點在右端
                        column           主軸爲垂直方向，起點在上沿
                        column-reverse;  主軸爲垂直方向，起點在下沿

(2)flex-wrap屬性決定了若是一條軸線排不下，如何換行

值範圍：flex-wrap: 
                        nowrap            不換行
                        wrap              換行，從第二行的左側開始
                        wrap-reverse      換行，從第二行的右側開始

(3)justify-content屬性決定了項目在主軸上的對齊方式

值範圍：justify-conten: 
                        flex-start            左對齊
                        flex-end              右對齊
                        center                居中對齊
                        space-between         兩端對齊，項目之間的間隔都相等
                        space-around          每一個項目兩側的間隔相等
                        
(4)align-items屬性決定了項目在交叉軸上如何對齊方式
  值範圍：align-items: 
                        flex-start     交叉軸的起點對齊。
                        flex-end       交叉軸的終點對齊。
                        center         交叉軸的中點對齊。
                        baseline       項目的第一行文字的基線對齊。
                        stretch        若是項目未設置高度或設爲auto，將佔滿整個容
                                       器的高度。
                                       
(5)align-content屬性決定了多根軸線的對齊方式，若是項目只有一根軸線，該屬性不起做用
  值範圍：align-content: 
                        flex-start     與交叉軸的起點對齊。
                        flex-end       與交叉軸的終點對齊。
                        center         與交叉軸的中點對齊。
                        space-between  與交叉軸兩端對齊，軸線之間的間隔平均分佈。
                        space-around   每根軸線兩側的間隔都相等。因此，軸線之間的
                                       間隔比軸線與邊框的間隔大一倍。
                        stretch        軸線佔滿整個交叉軸。
                        
  **以上就是flex佈局時容器上比較重要的屬性，需理解透徹。**

說完容器的佈局屬性再來講說容器下各個項目的佈局屬性

如下6個屬性設置在項目上：
     1. order         定義項目的排列順序。數值越小，排列越靠前，默認爲0
     2. flex-grow     定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大
     3. flex-shrink   定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小
     4. flex-basis    定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏
                      覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即
                      項目的原本大小
     5. align-self    容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬
                      性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有
                      父元素，則等同於stretch
                      
     **以上就是flex佈局時項目上比較重要的屬性，需理解透徹。**

幾點注意事項

1. flex佈局其實就是將父類的元素實現了流式佈局，咱們只須要在父類定位好的狀況下給子類「添磚
   加瓦」就能夠了
2. justify-content：center + align-content：center 結合使用能夠很方便的實現元素水
   平和垂直居中，相比以前用position來實現要高效不少

3. 因爲經歷了3個階段的演變，全部在個別瀏覽器下會存在兼容性問題(如uc的低版本、QQ瀏覽器)，
   因此建議使用"autoprefixer"這類工具自動補全各種寫法已避免該問題的出現