2017年如何在移动端优雅的使用flex

兼容性

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
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。