本文講的是<b>2017年如何在移動端優雅的使用flex，</b>做過移動端的同學都知道移動端布局太難了，終端太多了，傳統的布局方式已經力不從心，各種新的布局方式被發明
在flex之前，傳統布局有流式布局（就是預設的方式），絕對定位布局，彈性布局（em），和浮動布局，其中浮動布局并不是為布局而設計的，使用起來略顯繁瑣
2009年，對前端來說是不平凡的一年，html5定稿，es5.1釋出，flex應運而生，天生響應式，生而為布局，使用及其簡單
但是理想很豐滿，現實很骨感，flex三改其規範，浏覽器實作不一，各種神坑，本文将總結2017年移動端使用flex的最佳實踐和經驗
上圖中紅色箭頭代表我們應該相容的浏覽器情況，在國内，UC和QQ浏覽器的份額不容忽視，上圖中的 1 2 3 其實代表flex的三版文法，flex有09年版文法，11年版文法和标準文法；右上角帶黃色小方塊的代表需要添加-webkit-字首
将上圖總結一下，移動端需要的相容情況如下：
總結一下本文各處的最佳實踐，相容性目标是安卓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屬性應該這麼寫
舉個例子，display: flex要這麼寫
一定有同學說這也太麻煩了，有沒有啥簡單的辦法呢？還真有，共有三種辦法，感謝前輩
第一種，編輯器插件，有一個叫做autoprefix插件，sublime就可以安裝，你隻需寫标準屬性，然後按一下快捷鍵就能夠自動填充字首屬性。這種方法用起來最簡單，但這種方法後面會不太好維護，比如有一天不需要09版文法了怎麼破？？？一個一個去改吧，o(╯□╰)o
第二種，預處理器mixin，如果你用過less或者sass的話，一定知道mixin，下面已less 2.x為例，sass大同小異
在使用的隻要一行就行了
上面的代碼less編譯完的結果如下
這種方式的前提就是已經使用了css預處理器，可維護性比第一種方法更好；但是以我的經驗來說，其實大部分項目的mixin未必是有人維護的，比如可能有一天不需要字首版本了，但是并一定會有人去更新的
第三種，css後處理器，其實自從postcss出來之後，自動加字首的活就該交給postcss來做了，有了這個插件我們隻需要配置要相容的浏覽器版本就可以了，加字首的事情後處理器自動幫你解決，最近babel也出了一個類似的babel-env
終于可以和浏覽器字首愉快的玩耍了^_^
普及一個小科普知識，css後面的實驗室性不會再以加字首的方式進行了，而是會通過浏覽器的設定方式來顯示開啟實驗屬性，因為字首的方式不夠優雅。。。這鍋主要還是怪前端開發者，因為我們啊，隻寫webkit字首，都不寫标準屬性，o(╯□╰)o
希望本文能夠幫助你更好的使用flex，少踩一些坑，現在在移動端已經可以任性的使用flex了，但pc端還不行，ie8。。。如果沒有相容性問題，那就快來使用這一好用的布局方式吧
本文作者：顔海鏡
來源：51CTO
原文标題：2017年如何在移動端優雅的使用flex