移動端全兼容的flexbox速成班_html/css

業(yè)界與flexbox的相關(guān)教程文章也是各式各樣，新舊交替，很多小伙伴對flexbox想用又不敢用，究其原因也就是即分不清它各個版本的編寫規(guī)范，又苦惱于大家總是掛在嘴邊的一句“flexbox兼容性不好”。 所以今兒前來總結(jié)一個精華干貨貼，回顧那些樓主在項(xiàng)目里用過的flexbox，來談?wù)勀切┎挥每鄲馈凹嫒荨钡膄lexbox最佳實(shí)例（本文只聊移動端）。

Part1 先聊聊歷史：

在2009年最早版本的Flexbox規(guī)范中，我們編寫為“display:box;”，

中期版本的Flexbox；我們編寫為“display:flexbox;”

而目前的規(guī)范版本，我們定義“display:flex;”。flexbox規(guī)范的制定可謂是艱辛百變，

但目前使用的最新 版本草案 已于今年3-1日正式進(jìn)入W3C的 候選推薦標(biāo)準(zhǔn)（Candidate Recommendation） 階段，這也就意味著關(guān)于flexbox的最終規(guī)范即將落地。

Part2 版本VS兼容：

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

Part3 信手拈來的flexbox最佳實(shí)例

(以下代碼片段均遵循flexbox移動端全兼容性寫法，已驗(yàn)證機(jī)型列表見文章最后) 我們先來回顧一下flexbox的屬性體系：直白的解釋，我們常說的“flexbox”其實(shí)包含“父元素”，“子元素”2個部分，將“父元素”定義為一個flexbox，則在”父元素”里的“子元素們”就被賦予了可以自由伸縮的能力。 賦予神奇能力的代碼片段如下：

1.用flex做提示icon

這里用到了flex父元素的“align-items”屬性。 指定元素沿側(cè)軸對齊方式 align-item: flex-start | flex-end | center | space-between | space-around | stretch;

一句屬性設(shè)置，就可以完成頂部對齊，居中對齊或是底部對齊的切換，簡單方便值得擁有。

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

2.用flex做列表元素

同樣，只需要用flex父元素的“align-items”屬性，就可以制作靈活多變的列表元素了。如下圖所示，3種狀態(tài)的變形都不需要修改CSS文件，只需要按需隱藏DOM結(jié)構(gòu)就搞定。

這里多注意1個Tips：像下圖例子中的左側(cè)圖片，右側(cè)按鈕這些固定寬度的子元素，不需要增加“flex:1”的能力，維持原樣即可。

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

3.用flex做tab

做均分的tab，應(yīng)該是flexbox最常見的一個功能了，實(shí)現(xiàn)原理很簡單，只需要給“父元素”，“子元素”分別賦予“display：flex”,”flex：1″即可。子元素的寬度不會根據(jù)內(nèi)容的長短而發(fā)生改變。如下圖所示，前臺同學(xué)增加或刪減tab數(shù)量，只需要增減DOM結(jié)構(gòu)即可，無需樣式的修改。

★重點(diǎn)兼容TIPS: 在舊版的規(guī)范中，使用比例伸縮布局時，子元素的內(nèi)容長短不同會導(dǎo)致無法“等分”，這個時候，我們需要給子元素設(shè)置一個“width:0%”來解決問題。 ★重點(diǎn)兼容TIPS: 不要給flexbox里的子元素設(shè)置“margin:auto”的屬性，在部分安卓機(jī)下，它會導(dǎo)致該元素的寬度撐開到100%占位

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

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

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

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

5.用flex做搜索條利用align-items的屬性，還可以輕松完成flexbox的搜索條制作。

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

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

前面說的5個實(shí)例，其實(shí)都只用到了flexbox的基礎(chǔ)屬性+“align-items”屬性。千萬不要以為結(jié)束了，flexbox還可以做更多的事。例如一直很困擾我們的“垂直居中”：flexbox可以輕松實(shí)現(xiàn)不定寬高，不限數(shù)量的元素“水平+垂直居中”在屏幕中。

這部分用到了flexbox的另外一個屬性：指定元素沿主軸對齊方式 justify-content: flex-start | flex-end | center space-between | space-around; 將“沿著主軸對齊方式+沿著側(cè)軸對齊的方式”設(shè)置為居中，無論子元素是什么形態(tài)，都可以隨時隨地的“水平垂直居中”了。

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

7.用flex做垂直彈性布局

頂部欄，底部欄fixed，中間的元素支持滾動條，這是移動端常見的頁面結(jié)構(gòu)模型，我們熟稱為“垂直彈性布局”。使用傳統(tǒng)的flxed寫法總是會給一些安卓機(jī)帶來無法避免的煩人bug。其實(shí)只要巧妙利用flexbox的轉(zhuǎn)換方向的屬性，就可以輕松實(shí)現(xiàn)這個結(jié)構(gòu)模型了。如下圖，其實(shí)也就是一個橫著的彈性伸縮模型，倒轉(zhuǎn)垂直的彈性伸縮模型了。

這部分用到了flexbox的方向?qū)傩裕褐付ㄖ鬏S的伸縮流方向 flex-direction: row | column ; 這里注明一下，box-orient，box-direction是最老版本flex-box控制方向的2種寫法，默認(rèn)方向均為橫向，為保證兼容性，我們需要將它們2條都寫全。

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

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

Part4 其他

希望以上的demo對移動端開發(fā)的小伙伴們有用。當(dāng)然，flexbox還有一些很帥氣的屬性，例如order，wrap等等，它們只是暫時還不被移動端所有的系統(tǒng)兼容，咋們的x5內(nèi)核已經(jīng)剛剛表示全面兼容flexbox的所有屬性。關(guān)于flexbox的未來我們敬請期待就好！ 另，附贈 << 移動端屬性全兼容自查表 >>

已測機(jī)型

備注：

1.以上機(jī)型是根據(jù)友盟，應(yīng)用寶，微信及騰訊云運(yùn)營活動數(shù)據(jù)統(tǒng)計(jì)整合得出的Top7機(jī)型。

2.Top8-10的華為，oppo，魅族機(jī)型挑選于各品牌的占比最高機(jī)型，為品牌差異性測試而存在。

3.黃色標(biāo)注的分辨率為Top6的熱門分辨率，占比超過iOS市場87%，Android市場的50%（安卓分辨率太多，剩余50%分辨率占比較為均分零散，故暫不列入必測范圍）。

4.iOS8.0+，Android4.0+涵蓋了移動端90%的系統(tǒng)，其中iOS9.0+占比超過65%，Android4.4+占比超過60%，測試用例不強(qiáng)行要求涵蓋各機(jī)型所有版本的系統(tǒng)，以最新版本為準(zhǔn)，若因老版本出現(xiàn)bug次數(shù)大于3次，再加設(shè)為必測的問題版本。

Tags:css3, flexbox , h5布局

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com