做过移动端的同学都知道，移动端的布局太难了，终端太多，传统的布局方式已经无力做他们想做的事。在flex之前发明了各种新的布局方式，传统布局包括流式布局（默认方式）、绝对定位布局、弹性布局（em）、浮动布局。浮动布局不是为布局设计的，使用起来有点麻烦。2009年，对于前端来说是不平凡的一年，html5定型，es5.1发布，flex应运而生，自然响应式，为布局而生，好用却充满理想，现实中很骨感,flex改了三次规范，不同的浏览器有不同的实现，也有各种各样的坑。本文将总结2017年在移动端使用flex的最佳实践和经验。兼容性2017年9月。现在我们来看一下flex的兼容性，可以发现大部分是绿色的，上图中的红色箭头代表我们应该兼容的浏览器。在中国，UC和QQ浏览器的份额不容忽视。上图中的123其实代表了flex语法的三个版本。Flex有2009版和11版的语法。语法和标准语法；右上角有黄色方块的代表需要加上-webkit-前缀ios，可以发现需要兼容Android4.1+，IOS7+，这里百度给的数据，当然你应该根据自己产品的统计数据判断兼容性。总结本文最佳实践，兼容目标为Android4.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+containerpadding来模拟flex-wrap:wrap不能用，对应的老语法box-lines:mutiple大部分浏览器都不支持，也就是说不能folducspaninlineelementsassubitems当display必须设置为block时，最好直接使用块级元素。说了这么多，这里有一个标准的写法。一个flex属性应该写成webkitprefix09versionwebkitprefixstandardversion。比如display:flex来写display:-webkit-box;显示：-webkit-flex；显示：弹性；肯定有同学说这样太麻烦了。有什么简单的方法吗？真的，有3种方式，感谢第一种，editor插件，有个插件叫autoprefix，sublime可以安装，只需要写标准属性，然后按快捷键自动填写前缀属性这种方式最容易使用，但是以后维护起来就不太方便了。比如哪天09版的语法不用了，怎么破？？？一个一个改吧，o(╯□╰)o第二种是preprocessormixin。如果你用过less或者sass，你一定知道mixin。下面以less2.x为例，sass大同小异。display-flex(@display:flex){&when(@display=flex){display:-webkit-box;}&when(@display=inline-flex){显示：-webkit-inline-box；}显示：e("-webkit-@{display}");显示：@display；}.flex-direction(@direction){&when(@direction=row){-webkit-box-orient:horizo??ntal;-webkit-box-方向：正常；}&when(@direction=row-reverse){-webkit-box-orient:horizo??ntal;-webkit-box-方向：反向；}&when(@direction=column){-webkit-box-orient:vertical;-webkit-box-方向：正常；}&when(@direction=column-reverse){-webkit-box-orient:vertical;-webkit-box-方向：反向；}-webkit-flex-direction:@direction;弹性目录部分：@direction；}.flex-wrap(@wrap){&when(@wrap=nowrap){-webkit-box-lines:single;}&when(@wrap=wrap){-webkit-box-lines:multiple;}-webkit-flex-wrap:@wrap;弹性包装：@wrap；}.justify-content(@justify-content){&when(@justify-content=flex-start){-webkit-box-pack:开始;}&when(@justify-content=flex-end){-webkit-box-pack:end;}&when(@justify-content=center){-webkit-box-pack:center;}&when(@justify-content=space-between){-webkit-box-pack:justify;}-webkit-justify-content:@justify-content;证明内容：@justify-content；}.align-items(@align-items){&when(@align-items=flex-start){-webkit-box-align:开始;}&when(@align-items=flex-end){-webkit-box-align:end;}&当(@align-items=center){-webkit-box对齐：居中；}&when(@align-items=baseline){-webkit-box-align:baseline;}&when(@align-items=stretch){-webkit-box-align:stretch;}-webkit-align-items:@align-items;对齐项目：@align-items；}.order(@order){-webkit-box-ordinal-group:@order;-webkit-order:@order;订单：@order；}.flex(@flex){-webkit-box-flex:@flex;-webkit-flex:@flex;弹性：@弹性；}use.container{.display-flex;只需要一行.flex-方向（行）；.justify内容（中心）；}上面代码less的编译结果如下。container{display:-webkit-box;显示：-webkit-flex；显示：弹性；-webkit-box-orient：水平；-webkit-box-方向：正常；-webkit-flex-方向：行；弹性方向：行；-webkit-box-pack：中心；-webkit-justify-content：居中；内容：中心；}有同学说这么麻烦，我不想写了？其实应该已经有人写过了，比如compass，可以参考这个方法的前提是已经使用了css预处理器，可维护性比第一种方法好更好的;但以我的经验来看，其实大部分项目的mixins可能都没有人维护。比如某天可能不需要prefix版本，但是肯定有人会更新第三种，css后处理器。其实自从postcss出来之后，自动添加前缀的工作就应该交给postcss了。使用这个插件，我们只需要配置浏览器版本兼容即可。后处理器会自动为您解决前缀问题。最近babel发布了一个类似的插件fis-postprocessor-autoprefixer，可以在babel-envfis中使用。我在之前的文章《经验无线步骤页改版总结》介绍过webpack中可以使用postcss-loader。这个loader终于可以愉快的浏览器前缀了玩的开心^_^普及一点科普知识，css背后的实验室性质就不再加前缀了，而是通过浏览器设置方式启用experimental属性来显示，因为前缀方法不够优雅。.这个锅主要怪在前端开发者身上，因为我们只写了webkit前缀，没有写标准属性，o(╯□╰)o总结希望这篇文章能帮助大家更好的使用flex，避免一些坑。现在在移动端已经可以自由使用flex了，但是PC端还没有，ie8。..如果没有兼容性问题，那就快来使用这种简单易用的布局方式吧。最后强烈推荐大家看大魔老师的《图解CSS3》，这是我看过的关于css3最好的一本书。
