2017年如何在移動端優雅的使用flex

號外號外:專註於移動端的fullPage.js來啦!!!快點我查看

做過移動端的同學都知道移動端布局太難了,終端太多了,傳統的布局方式已經力不從心,各種新的布局方式被發明

在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版nwebkit前綴標準版n標準版n

舉個例子,display: flex要這麼寫

display: -webkit-box; ndisplay: -webkit-flex; ndisplay: flex; n

一定有同學說這也太麻煩了,有沒有啥簡單的辦法呢?還真有,共有三種辦法,感謝前輩

第一種,編輯器插件,有一個叫做autoprefix插件,sublime就可以安裝,你只需寫標準屬性,然後按一下快捷鍵就能夠自動填充前綴屬性。這種方法用起來最簡單,但這種方法後面會不太好維護,比如有一天不需要09版語法了怎麼破???一個一個去改吧,o(╯□╰)o

第二種,預處理器mixin,如果你用過less或者sass的話,一定知道mixin,下面已less 2.x為例,sass大同小異

.display-flex(@display: flex) {n & when (@display=flex) {n display: -webkit-box;n }n & when (@display=inline-flex) {n display: -webkit-inline-box;n }n display: e("-webkit-@{display}");n display: @display;n}nn.flex-direction(@direction) {n & when (@direction=row) {n -webkit-box-orient: horizontal;n -webkit-box-direction: normal;n }n & when (@direction=row-reverse) {n -webkit-box-orient: horizontal;n -webkit-box-direction: reverse;n }n & when (@direction=column) {n -webkit-box-orient: vertical;n -webkit-box-direction: normal;n }n & when (@direction=column-reverse) {n -webkit-box-orient: vertical;n -webkit-box-direction: reverse;n }n -webkit-flex-direction: @direction;n flex-direction: @direction;n}nn.flex-wrap(@wrap) {n & when (@wrap=nowrap) {n -webkit-box-lines: single;n }n & when (@wrap=wrap) {n -webkit-box-lines: multiple;n }n -webkit-flex-wrap: @wrap;n flex-wrap: @wrap;n}nn.justify-content(@justify-content) {n & when (@justify-content=flex-start) {n -webkit-box-pack: start;n }n & when (@justify-content=flex-end) {n -webkit-box-pack: end;n }n & when (@justify-content=center) {n -webkit-box-pack: center;n }n & when (@justify-content=space-between) {n -webkit-box-pack: justify;n }n -webkit-justify-content: @justify-content;n justify-content: @justify-content;n}nn.align-items(@align-items) {n & when (@align-items=flex-start) {n -webkit-box-align: start;n }n & when (@align-items=flex-end) {n -webkit-box-align: end;n }n & when (@align-items=center) {n -webkit-box-align: center;n }n & when (@align-items=baseline) {n -webkit-box-align: baseline;n }n & when (@align-items=stretch) {n -webkit-box-align: stretch;n }n -webkit-align-items: @align-items;n align-items: @align-items;n}nn.order(@order) {n -webkit-box-ordinal-group: @order;n -webkit-order: @order;n order: @order;n}nn.flex(@flex) {n -webkit-box-flex: @flex;n -webkit-flex: @flex;n flex: @flex;n}n

在使用的只要一行就行了

.container {n .display-flex;n .flex-direction(row);n .justify-content(center);n}n

上面的代碼less編譯完的結果如下

.container {n display: -webkit-box;n display: -webkit-flex;n display: flex;n -webkit-box-orient: horizontal;n -webkit-box-direction: normal;n -webkit-flex-direction: row;n flex-direction: row;n -webkit-box-pack: center;n -webkit-justify-content: center;n justify-content: center;n}n

有同學說這麼麻煩,我不想寫啊?其實應該有人已經寫好了,比如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講的最好的書了

相關資料

  • Flex 布局教程:語法篇
  • Flex 布局教程:實例篇

原文網址:yanhaijing.com/css/2016

歡迎訂閱我的微信公眾帳號,只推送原創文字。掃碼或搜索:顏海鏡

推薦閱讀:

如何看待民工叔跳槽 Teambition?
為什麼 ++[[]][+[]]+[+[]] = 10?
如何評價耗子在segmentfault的《web 安全之 xss 漏洞攻擊》live?
DDFE 技術周刊(第一期)2016.11.04
關於valueOf執行順序問題?

TAG:CSS | CSS3 | 前端开发 |