2017年如何在移動端優雅的使用flex
做過移動端的同學都知道移動端布局太難了，終端太多了，傳統的布局方式已經力不從心，各種新的布局方式被發明
在flex之前，傳統布局有流式布局（就是默認的方式），絕對定位布局，彈性布局（em），和浮動布局，其中浮動布局并不是為布局而設計的，使用起來略顯繁瑣
2009年，對前端來說是不平凡的一年，html5定稿，es5.1發布，flex應運而生，天生響應式，生而為布局，使用及其簡單
但是理想很豐滿，現實很骨感，flex三改其規范，瀏覽器實現不一，各種神坑，本文將總結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; 一定有同學說這也太麻煩了，有沒有啥簡單的辦法呢？還真有，共有三種辦法，感謝前輩
第一種，編輯器插件，有一個叫做autoprefix插件，sublime就可以安裝，你只需寫標準屬性，然后按一下快捷鍵就能夠自動填充前綴屬性。這種方法用起來最簡單，但這種方法后面會不太好維護，比如有一天不需要09版語法了怎么破？？？一個一個去改吧，o(╯□╰)o
第二種，預處理器mixin，如果你用過less或者sass的話，一定知道mixin，下面已less 2.x為例，sass大同小異
.display-flex(@display: flex) { & when (@display=flex) { display: -webkit-box; } & when (@display=inline-flex) { display: -webkit-inline-box; } display: e("-webkit-@{display}"); display: @display; } .flex-direction(@direction) { & when (@direction=row) { -webkit-box-orient: horizontal; -webkit-box-direction: normal; } & when (@direction=row-reverse) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; } & when (@direction=column) { -webkit-box-orient: vertical; -webkit-box-direction: normal; } & when (@direction=column-reverse) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; } -webkit-flex-direction: @direction; flex-direction: @direction; } .flex-wrap(@wrap) { & when (@wrap=nowrap) { -webkit-box-lines: single; } & when (@wrap=wrap) { -webkit-box-lines: multiple; } -webkit-flex-wrap: @wrap; flex-wrap: @wrap; } .justify-content(@justify-content) { & when (@justify-content=flex-start) { -webkit-box-pack: start; } & 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: @justify-content; } .align-items(@align-items) { & when (@align-items=flex-start) { -webkit-box-align: start; } & when (@align-items=flex-end) { -webkit-box-align: end; } & when (@align-items=center) { -webkit-box-align: center; } & when (@align-items=baseline) { -webkit-box-align: baseline; } & when (@align-items=stretch) { -webkit-box-align: stretch; } -webkit-align-items: @align-items; align-items: @align-items; } .order(@order) { -webkit-box-ordinal-group: @order; -webkit-order: @order; order: @order; } .flex(@flex) { -webkit-box-flex: @flex; -webkit-flex: @flex; flex: @flex; } 在使用的只要一行就行了
.container { .display-flex; .flex-direction(row); .justify-content(center); } 上面的代碼less編譯完的結果如下
.container { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } 有同學說這么麻煩，我不想寫啊？其實應該有人已經寫好了，比如compass，可以參考一下
這種方式的前提就是已經使用了css預處理器，可維護性比第一種方法更好；但是以我的經驗來說，其實大部分項目的mixin未必是有人維護的，比如可能有一天不需要前綴版本了，但是并一定會有人去更新的
第三種，css后處理器，其實自從postcss出來之后，自動加前綴的活就該交給postcss來做了，有了這個插件我們只需要配置要兼容的瀏覽器版本就可以了，加前綴的事情后處理器自動幫你解決，最近babel也出了一個類似的babel-env
fis中可以使用fis-postprocessor-autoprefixer這個插件，我在之前的文章《經驗無線步驟頁改版總結》中有介紹
webpack中可以使用postcss-loader這個loader
終于可以和瀏覽器前綴愉快的玩耍了^_^
普及一個小科普知識，css后面的實驗室性不會再以加前綴的方式進行了，而是會通過瀏覽器的設置方式來顯示開啟實驗屬性，因為前綴的方式不夠優雅。。。這鍋主要還是怪前端開發者，因為我們啊，只寫webkit前綴，都不寫標準屬性，o(╯□╰)o
總結
希望本文能夠幫助你更好的使用flex，少踩一些坑，現在在移動端已經可以任性的使用flex了，但pc端還不行，ie8。。。如果沒有兼容性問題，那就快來使用這一好用的布局方式吧
最后我強烈建議大家閱讀大漠老師的《圖解CSS3》，這是我見過講css3講的最好的書了
