兼容性

2017年9月份，現(xiàn)在來(lái)看下flex的兼容性，可以發(fā)現(xiàn)絕大部分都是綠色

上圖中紅色箭頭代表我們應(yīng)該兼容的瀏覽器情況，在國(guó)內(nèi)，UC和QQ瀏覽器的份額不容忽視，上圖中的 1 2 3 其實(shí)代表flex的三版語(yǔ)法，flex有09年版語(yǔ)法，11年版語(yǔ)法和標(biāo)準(zhǔn)語(yǔ)法；右上角帶黃色小方塊的代表需要添加-webkit-前綴
將上圖總結(jié)一下，移動(dòng)端需要的兼容情況如下：

再來(lái)看一下百度給出的移動(dòng)設(shè)備的統(tǒng)計(jì)情況，分別是安卓和ios，可以發(fā)現(xiàn)現(xiàn)在需要兼容安卓4.1+，IOS7+，這里百度給出的數(shù)據(jù)，我們可以根據(jù)自己產(chǎn)品的統(tǒng)計(jì)情況來(lái)確定兼容情況
兼容性目標(biāo)是安卓4.1+，IOS7+，UC和qq瀏覽器

屬性對(duì)照

通過(guò)上面的目標(biāo)和caniuse，很容易得出 我們需要寫(xiě)09和標(biāo)準(zhǔn)兩版語(yǔ)法，只有在兩版語(yǔ)法中都存在屬性才能使用，下面給出兩版語(yǔ)法的對(duì)照關(guān)系，注意這不是語(yǔ)法指南，語(yǔ)法指南請(qǐng)看結(jié)尾處的推薦資料

容器的屬性

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items

• align-content
  

  項(xiàng)目的屬性

  項(xiàng)目屬性包括：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex

• align-self
  

  采坑經(jīng)驗(yàn)

  一般來(lái)說(shuō)只要09版語(yǔ)法有對(duì)應(yīng)功能，就可以使用了，但是移動(dòng)端還有一些坑，導(dǎo)致某些屬性不能用justify-content: space-around 不能用，舊版語(yǔ)法沒(méi)有，但是可以用space-between+容器的padding模擬flex-wrap: wrap 不能用，對(duì)應(yīng)的舊版語(yǔ)法 box-lines: mutiple 大部分瀏覽器不支持，也就是說(shuō)不能折行uc span行內(nèi)元素作為子項(xiàng)時(shí) display 必須設(shè)置為block，最好直接使用塊級(jí)元素

說(shuō)了這么多下面給一份標(biāo)準(zhǔn)的寫(xiě)法，一個(gè)flex屬性應(yīng)該這么寫(xiě)

webkit前綴09版
webkit前綴標(biāo)準(zhǔn)版
標(biāo)準(zhǔn)版

舉個(gè)例子，display: flex要這么寫(xiě)

display: -webkit-box; display: -webkit-flex; display: flex;

作者：顏海鏡
鏈接：https://zhuanlan.zhihu.com/p/29637639
來(lái)源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

轉(zhuǎn)載于:https://www.cnblogs.com/changlon/p/7599377.html

總結(jié)

以上是生活随笔為你收集整理的2017年如何在移动端优雅的使用flex的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。