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

$\"收藏此主题\"$

190614

0粉丝
0精华
877帖子

用户： 190614
等级：Lv1
地区：

发表于 2017-09-25 07:32

| 只看楼主 | 申请车主认证 | 申请精华

您好，精华帖至少要有9张图片，文字不少100个字！并且是原创内容，布局合理。
查看精华帖标准>>

楼主电梯直达楼

号外号外：专注于移动端的fullPage.js来啦！！！快点我查看

做过移动端的同学都知道移动端布局太难了，终端太多了，传统的布局方式已经力不从心，各种新的布局方式被发明

在flex之前，传统布局有流式布局（就是默认的方式），绝对定位布局，弹性布局（em），和浮动布局，其中浮动布局并不是为布局而设计的，使用起来略显繁琐

2009年，对前端来说是不平凡的一年，html5定稿，es5.1发布，flex应运而生，天生响应式，生而为布局，使用及其简单

但是理想很丰满，现实很骨感，flex三改其规范，浏览器实现不一，各种神坑，本文将总结2017年移动端使用flex的最佳实践和经验

兼容性

2017年9月份，现在来看下flex的兼容性，可以发现绝大部分都是绿色

上图中红色箭头代表我们应该兼容的浏览器情况，在国内，UC和QQ浏览器的份额不容忽视，上图中的 1 2 3 其实代表flex的三版语法，flex有09年版语法，2011年版语法和标准语法；右上角带黄色小方块的代表需要添加-webkit-前缀

将上图总结一下，移动端需要的兼容情况如下：

再来看一下百度给出的移动设备的统计情况，区别是安卓和ios，可以发现现在需要兼容安卓4.1 ，IOS7 ，这里百度给出的数据，当然你应该根据自己产品的统计情况来确定兼容情况

总结一下本文各处的最佳实践，兼容性目标是安卓4.1 ，IOS7 ，UC和qq浏览器

属性对照

通过上面的目标和caniuse，很容易得出我们需要写09和标准两版语法，只有在两版语法中都存在属性才能使用，下面给出两版语法的对照关系，注意这不是语法指南，语法指南请看结尾处的推荐资料

容器的属性

容器属性包括：
displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

项目的属性

项目属性包括：
orderflex-growflex-shrinkflex-basisflexalign-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;
一定有同学说这也太麻烦了，有没有啥简单的方法呢？还真有，共有三种方法，感谢前辈

第一种，编辑器插件，有一个叫做autoprefix插件，sublime就可以安装，你只需写标准属性，然后按一下快捷键就能够自动填充前缀属性。这种方法用起来最简单，但这种方法后面会不太好维护，比如有一天不需要09版语法了怎么破？？？一个一个去改吧，o(╯□╰)o

第二种，预处理器mixin，如果你用过less或者sass的话，一定知道mixin，下面已less 2.x为例，sass大同小异

.display-flex(@display: flex) {