彈性盒

提及flexbox，都算是件陳年舊事了，它是2009年W3C提出的一種全新的可伸縮的CSS佈局方式。依賴flexbox，咱們能夠更簡單，高效的完成可伸縮式頁面的佈局。

業界與flexbox的相關教程文章也是各式各樣，新舊交替，不少小夥伴對flexbox想用又不敢用，究其緣由也就是即分不清它各個版本的編寫規範，又苦惱於你們老是掛在嘴邊的一句「flexbox兼容性很差」。 因此今兒前來總結一個精華乾貨貼，回顧那些樓主在項目裏用過的flexbox，來談談那些不用苦惱「兼容」的flexbox最佳實例（本文只聊移動端）。

Part1 先聊聊歷史：

在2009年最先版本的Flexbox規範中，咱們編寫爲「display:box;」，

中期版本的Flexbox；咱們編寫爲「display:flexbox;」

而目前的規範版本，咱們定義「display:flex;」。flexbox規範的制定可謂是艱辛百變，

但目前使用的最新版本草案已於今年3-1日正式進入W3C的候選推薦標準（Candidate Recommendation）階段，這也就意味着關於flexbox的最終規範即將落地。

 

Part2 版本VS兼容：

以下圖所示，除了Opera mobile12，移動端的各大瀏覽器都是支持flexbox的舊版語法的，但不包含flex的wrap屬性。

 

Part3 信手拈來的flexbox最佳實例

(如下代碼片斷均遵循flexbox移動端全兼容性寫法，已驗證機型列表見文章最後) 咱們先來回顧一下flexbox的屬性體系：直白的解釋，咱們常說的「flexbox」其實包含「父元素」，「子元素」2個部分，將「父元素」定義爲一個flexbox，則在"父元素"裏的「子元素們」就被賦予了能夠自由伸縮的能力。 賦予神奇能力的代碼片斷以下：

 

1.用flex作提示icon

這裏用到了flex父元素的「align-items」屬性。 指定元素沿側軸對齊方式 align-item: flex-start | flex-end | center | space-between | space-around | stretch;

一句屬性設置，就能夠完成頂部對齊，居中對齊或是底部對齊的切換，簡單方便值得擁有。

【Demo Link】: http://jsfiddle.net/tikizzz/2zuthdap/

 

2.用flex作列表元素

一樣，只須要用flex父元素的「align-items」屬性，就能夠製做靈活多變的列表元素了。以下圖所示，3種狀態的變形都不須要修改CSS文件，只須要按需隱藏DOM結構就搞定。

這裏多注意1個Tips：像下圖例子中的左側圖片，右側按鈕這些固定寬度的子元素，不須要增長「flex:1」的能力，維持原樣便可。

【Demo Link】: https://jsfiddle.net/tikizzz/ztdfq5dw/

 

3.用flex作tab

作均分的tab，應該是flexbox最多見的一個功能了，實現原理很簡單，只須要給「父元素」，「子元素」分別賦予「display：flex」,"flex：1"便可。子元素的寬度不會根據內容的長短而發生改變。以下圖所示，前臺同窗增長或刪減tab數量，只須要增減DOM結構便可，無需樣式的修改。

★重點兼容TIPS:  在舊版的規範中，使用比例伸縮佈局時，子元素的內容長短不一樣會致使沒法「等分」，這個時候，咱們須要給子元素設置一個「width:0%」來解決問題。 ★重點兼容TIPS:  不要給flexbox裏的子元素設置「margin:auto」的屬性，在部分安卓機下，它會致使該元素的寬度撐開到100%佔位

【Demo Link】: https://jsfiddle.net/tikizzz/ztdfq5dw/

 

4.用flex作導航(只適合三項的佈局) 同樣也是利用align-items的屬性便可，就能夠輕鬆完成flexbox的導航製做。

可是導航變成單按鈕佈局的時候，會致使標題欄的位位移，不是特別的推薦。

【Demo Link】: https://jsfiddle.net/tikizzz/g2Lj417p/

 

5.用flex作搜索條 利用align-items的屬性，還能夠輕鬆完成flexbox的搜索條製做。

【Demo Link】:https://jsfiddle.net/tikizzz/yut2qv9b/

 

6.用flex作垂直居中(單/多)

前面說的5個實例，其實都只用到了flexbox的基礎屬性+「align-items」屬性。千萬不要覺得結束了，flexbox還能夠作更多的事。例如一直很困擾咱們的「垂直居中」：flexbox能夠輕鬆實現不定寬高，不限數量的元素「水平+垂直居中」在屏幕中。

這部分用到了flexbox的另一個屬性：指定元素沿主軸對齊方式 justify-content: flex-start | flex-end | center space-between | space-around; 將「沿着主軸對齊方式+沿着側軸對齊的方式」設置爲居中，不管子元素是什麼形態，均可以隨時隨地的「水平垂直居中」了。

【Demo Link】:https://jsfiddle.net/tikizzz/zq8cdkfg/

 

7.用flex作垂直彈性佈局

頂部欄，底部欄fixed，中間的元素支持滾動條，這是移動端常見的頁面結構模型，咱們熟稱爲「垂直彈性佈局」。使用傳統的flxed寫法老是會給一些安卓機帶來沒法避免的煩人bug。其實只要巧妙利用flexbox的轉換方向的屬性，就能夠輕鬆實現這個結構模型了。以下圖，其實也就是一個橫着的彈性伸縮模型，倒轉垂直的彈性伸縮模型了。

這部分用到了flexbox的方向屬性：指定主軸的伸縮流方向 flex-direction: row | column ; 這裏註明一下，box-orient，box-direction是最老版本flex-box控制方向的2種寫法，默認方向均爲橫向，爲保證兼容性，咱們須要將它們2條都寫全。

【Demo Link】:https://jsfiddle.net/tikizzz/obLp1mga/

最後，附贈一個全DEMO的合集：http://115.159.36.96/tikizheng/flextest/demo.html

 

Part4 其餘

但願以上的demo對移動端開發的小夥伴們有用。固然，flexbox還有一些很帥氣的屬性，例如order，wrap等等，它們只是暫時還不被移動端全部的系統兼容，咋們的x5內核已經剛剛表示全面兼容flexbox的全部屬性。關於flexbox的將來咱們敬請期待就好！ 另，附贈  <<移動端屬性全兼容自查表>>

 

已測機型

 

備註：

1.以上機型是根據友盟，應用寶，微信及騰訊雲運營活動數據統計整合得出的Top7機型。

2.Top8-10的華爲，oppo，魅族機型挑選於各品牌的佔比最高機型，爲品牌差別性測試而存在。

3.黃色標註的分辨率爲Top6的熱門分辨率，佔比超過iOS市場87%，Android市場的50%（安卓分辨率太多，剩餘50%分辨率佔比較爲均分零散，故暫不列入必測範圍）。

4.iOS8.0+，Android4.0+涵蓋了移動端90%的系統，其中iOS9.0+佔比超過65%，Android4.4+佔比超過60%，測試用例不強行要求涵蓋各機型全部版本的系統，以最新版本爲準，若因老版本出現bug次數大於3次，再加設爲必測的問題版本。