CSS3屬性: Flexbox 快速上手記

Sponsor

說起 CSS3 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做導航

用flex做導航(只適合三項的布局) 一樣也是利用align-items的屬性即可，就可以輕松完成flexbox的導航制作。

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

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

5.用 Flex 做搜索布局

用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次，再加設為必測的問題版本。

作者：恬恬
來源：isux

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。