兼容性

2017年9月份，現在來看下flex的兼容性，可以發現絕大部分都是綠色

上圖中紅色箭頭代表我們應該兼容的瀏覽器情況，在國內，UC和QQ瀏覽器的份額不容忽視，上圖中的 1 2 3 其實代表flex的三版語法，flex有09年版語法，11年版語法和標準語法；右上角帶黃色小方塊的代表需要添加-webkit-前綴
將上圖總結一下，移動端需要的兼容情況如下：

再來看一下百度給出的移動設備的統計情況，分別是安卓和ios，可以發現現在需要兼容安卓4.1+，IOS7+，這里百度給出的數據，我們可以根據自己產品的統計情況來確定兼容情況
兼容性目標是安卓4.1+，IOS7+，UC和qq瀏覽器

屬性對照

通過上面的目標和caniuse，很容易得出 我們需要寫09和標準兩版語法，只有在兩版語法中都存在屬性才能使用，下面給出兩版語法的對照關系，注意這不是語法指南，語法指南請看結尾處的推薦資料

容器的屬性

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

• align-content
  

  項目的屬性

  項目屬性包括：

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

• align-self
  

  采坑經驗

  一般來說只要09版語法有對應功能，就可以使用了，但是移動端還有一些坑，導致某些屬性不能用justify-content: space-around 不能用，舊版語法沒有，但是可以用space-between+容器的padding模擬flex-wrap: wrap 不能用，對應的舊版語法 box-lines: mutiple 大部分瀏覽器不支持，也就是說不能折行uc span行內元素作為子項時 display 必須設置為block，最好直接使用塊級元素

說了這么多下面給一份標準的寫法，一個flex屬性應該這么寫

webkit前綴09版
webkit前綴標準版
標準版

舉個例子，display: flex要這么寫

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

作者：顏海鏡
鏈接：https://zhuanlan.zhihu.com/p/29637639
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

轉載于:https://www.cnblogs.com/changlon/p/7599377.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。