Flex彈性佈局在移動設備上的應用

時間 2019-11-09

原文原文鏈接

本文內容爲整理摘錄。css

##引文html

首先,咱們有表格佈局。當不考慮語義而且利用一些適當的嵌套和其餘技巧,咱們能夠用table創建具備必定功能的佈局。css3

而後是如今大多數人都在使用的浮動佈局。咱們可使用任何咱們想用的元素,但浮動並不適用於初學者。表面上它看起來很基礎,但背後複雜的功能可使經驗豐富的開發者看着本身的屏幕不知所措。另外,浮動佈局有一個缺點就是須要經過額外的元素清除浮動,或者更好一點,能夠清除CSS浮動而不添加額外的標籤。web

這些缺點使得浮動佈局不是很容易掌握，由於沒有一個默認的方法能夠創建起浮動與元素之間的關係，因此咱們還須要更多的方法來實現多欄等高佈局。瀏覽器

而後有些人開始使用display: table，display: table-cell等,但因爲直到IE8 Internet Explorer瀏覽器才支持,人們彷佛放棄了而只是接受float做爲實際解決方案。ide

鑑於以上方案的缺點，彈性佈局（Flex）的優點不言而喻：佈局

獨立的高度控制與對齊。
獨立的元素順序。
指定元素之間的關係。
靈活的尺寸和對齊方式。

##開始使用彈性佈局flex

彈性佈局的實現須要一些看上去「很新的」CSS屬性定義。下面羅列了這些屬性，不少文章中都對這些內容有些詳盡的解釋，這裏再也不冗述。優化

######概念網站

你在使用伸縮佈局的時候你應該熟悉的一個概念是主軸與側軸，與常說的 X、Y 軸有點像，不過也有點差別。主軸是伸縮佈局流向的那個方向的軸，也就是在橫排的時候是水平軸，在豎排的時候是垂直軸：

######屬性######

display:flex | inline-flex; 定義彈性盒容器

flex-direction:row | row-reverse | column | column-reverse 定義主軸方向

flex-wrap:nowrap | wrap | wrap-reverse 定義側軸方向單行或多行

flex-flow ‘flex-direction’ 和 ‘flex-wrap’的組合簡寫

justify-content:flex-start | flex-end | center | space-between | space-around 定義主軸上子元素的排列方式

align-items:flex-start | flex-end | center | baseline | stretch 定義側軸上子元素高度的伸縮

order 子元素的顯示順序

flex-grow 父元素拉伸時子元素的拉伸比例值

flex-shrink 父元素縮小時子元素的收縮比例值

flex-basis 子元素的初始顯示比例值

flex flex-grow [，flex-shrink，flex-basis]的簡寫形式

以上的CSS成爲「新」的彈性盒模式,事實上，只有最近的幾個Chrome內核（包括桌面版Chrome+、Android版Chrome、Opera 15+）支持這種寫法，Firefox的支持還不夠完善(詳細信息點擊這裏)。更多的現代瀏覽器從幾年前開始支持一種「老的」彈性盒模型語法，除了IE10。IE10彷佛支持一種介於老語法與新語法之間的新語法。下面的表格顯示了它們之間的關係：

<table style=" font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 20px; text-align: left; border-collapse: collapse; border-spacing: 1px; background-color: rgb(183, 197, 212); width: 682px; margin: 0px 0px 1em; border: 1px solid rgb(183, 197, 212); caption-side: bottom;"><tbody><tr style="background-color: white;"><th colspan="1" rowspan="1" style="background-color: rgb(183, 197, 212);"> </th><th colspan="1" rowspan="1" style="background-color: rgb(183, 197, 212);">含義</th><th colspan="1" rowspan="1" style="background-color: rgb(183, 197, 212);">新語法（-webkit-,-moz-）</th><th colspan="1" rowspan="1" style="background-color: rgb(183, 197, 212);">老語法（-webkit-,-moz-）</th><th colspan="1" rowspan="1" style="background-color: rgb(183, 197, 212);">IE10語法</th></tr><tr style="background-color: rgb(240, 240, 240);"><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">1</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">彈性容器定義</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">display : flex</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">display : box</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">display : -ms-flexbox</td></tr><tr style="background-color: white;"><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">2</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">子元素排列方式</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">flex-direction : row |  column-row | reverse | column-reverse</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">box-orient : horizontal | vertical | inline-axis | block-axis | inherit</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex-direction : row | column | row-reverse | column-reverse | inherit </td></tr><tr style="background-color: rgb(240, 240, 240);"><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">3</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">主軸子元素分佈</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">justify-content : flex-start |  flex-end | center | space- around | space-between </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">box-pack : start | end | center | justify(<strike>firefox</strike>)</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex-pack : start | end | center | justify</td></tr><tr style="background-color: rgb(240, 240, 240);"><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">4</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">側軸子元素分佈</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">align-content : flex-start |  flex-end | center | space- around | space-between   </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">NOT SUPPORTED</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex-line-pack: start | end | center | justify | distribute | stretch </td></tr><tr style="background-color: white;"><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">5</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">側軸方向子元素對齊</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">align-items : flex-start | flex-end | center | stretch </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">box-align : start | end  | center | baseline | stretch</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex-align : start | end | center | baseline | stretch</td></tr><tr style="background-color: rgb(240, 240, 240);"><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">6</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">彈性子元素伸縮值</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">flex : [positive-flex] [negative-flex] [preferred-size] </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">box-flex : [positive-flex] </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex : [positive-flex] [negative-flex] [preferred-size]</td></tr><tr style="background-color: rgb(240, 240, 240);"><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">7</td><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">子元素排列順序</td><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">order : 1</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">box-ordinal-group : 1 (positive) </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex-order : 1</td></tr><tr style="background-color: rgb(240, 240, 240);"><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">8</td><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">在子元素中覆蓋父元素定義的第5項</td><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">align-self : flex-start | flex- end | center | stretch </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">NOT SUPPORTED </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex-item-align : auto | start | end | center | baseline | stretch </td></tr><tr style="background-color: rgb(240, 240, 240);"><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">9</td><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">換行</td><td colspan="1" rowspan="1" style="text-align: left;padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">flex-wrap : wrap | no-wrap | wrap-reverse</td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">NOT SUPPORTED </td><td colspan="1" rowspan="1" style="padding: 6px; vertical-align: top; border: 1px solid rgb(183, 197, 212);">-ms-flex-wrap : none | wrap | wrap-reverse</td></tr></tbody></table>

看上去應用這個新的模型還太過樂觀，至少在桌面環境中。

儘管不少人不推薦繼續使用老舊的語法，可是現實是這個語法已經被iOS和Android上webkit支持的足夠完善，而且看上去會在至關長一段時間裏繼續支持下去。所以若是你不是新事物的狂熱支持者，而且僅需考慮iOS和Android這兩大移動平臺的webkit瀏覽器，能夠考慮使用新老語法混合的方式開發你的網站。

如何區分新舊版本的語法請點擊「Old」 Flexbox and 「New」 Flexbox。

新版本的支持狀況：

<h3 style="font-size:24px;font-family:AurulentSansRegular, serif;font-weight:normal;color:#3D3527;"> </h3> <table style="margin:0px;width:920px;color:#3D3527;font-family:Verdana, Arial, sans-serif;font-size:14px;"> <tbody> <tr> <th style="font-weight:normal;color:white;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> </th> <th style="background-color:#233D61;font-weight:normal;color:white;"> IE </th> <th style="background-color:#A36223;font-weight:normal;color:white;"> Firefox </th> <th style="background-color:#3F77BB;font-weight:normal;color:white;"> Chrome </th> <th style="background-color:#666666;font-weight:normal;color:white;"> Safari </th> <th style="background-color:#812323;font-weight:normal;color:white;"> Opera </th> <th style="background-color:#333333;font-weight:normal;color:white;font-size:0.8em;"> iOS Safari </th> <th style="background-color:#992626;font-weight:normal;color:white;font-size:0.8em;"> Opera Mini </th> <th style="background-color:#7BA13B;font-weight:normal;color:white;font-size:0.8em;"> Android Browser </th> <th style="background-color:#111111;font-weight:normal;color:white;font-size:0.8em;"> Blackberry Browser </th> </tr> </tbody> <tbody> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> </th> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 2.1-webkit- </td> <td style="background-color:#D3BD98;"> </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> </th> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 2.2-webkit- </td> <td style="background-color:#D3BD98;"> </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> </th> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 3.2-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 2.3-webkit- </td> <td style="background-color:#D3BD98;"> </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> </th> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 4.0-4.1-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 3.0-webkit- </td> <td style="background-color:#D3BD98;"> </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> </th> <td style="border:1px solid #DAC8A7;background-color:#FF9999;color:#330000;"> 8.0 </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 4.2-4.3-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 4.0-webkit- </td> <td style="background-color:#D3BD98;"> </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> </th> <td style="border:1px solid #DAC8A7;background-color:#FF9999;color:#330000;"> 9.0 </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 21.0-moz- </td> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 27.0-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 5.1-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 5.0-5.1-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 4.1-webkit- </td> <td style="background-color:#CCDD55;color:#113300;"> 7.0-webkit- </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> Current </th> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 10.0-ms- </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 22.0 </td> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 28.0-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 6.0-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 15.0-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 6.0-6.1-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#FF9999;color:#330000;"> 5.0-7.0 </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 4.2-webkit- </td> <td style="background-color:#CCFF99;color:#003300;"> 10.0-webkit- </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> Near future </th> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 11.0 </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 23.0 </td> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 29.0 </td> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 7.0-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 16.0-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#CCFF99;color:#003300;"> 7.0-webkit- </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="background-color:#D3BD98;"> </td> </tr> <tr> <th style="background-color:#CFB78B;font-weight:normal;border:1px solid #DAC8A7;font-size:13px;font-family:AurulentSansRegular, serif !important;"> Farther future </th> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#CCDD55;color:#113300;"> 24.0 </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="border:1px solid #DAC8A7;background-color:#D3BD98;"> </td> <td style="background-color:#D3BD98;"> </td> </tr> </tbody> </table>

因爲老版語法對多行支持很差，所以你最好在一個flex容器內僅包含一行子元素。這致使flex在響應式設計中的應用變得低能：元素不能在父元素的寬度縮小時進行折行處理。在純粹的響應式站點設計中，自動折行仍然難以用flex實現。

在iOS和Android瀏覽器中，老版語法的flex仍然具備其巨大的應用價值。因爲移動版站點通常要鋪滿整個寬度，而設備的屏幕的像素寬度是多種多樣的，所以如今的移動站點中大量採用百分比的方式分配子元素的寬度，以指望能適應不一樣的屏幕寬度。

好比，一個區塊包含排在一行的兩個元素：一張圖和一大段文字，分別佔寬40%和60%。文字可能很長，難以顯示完整。在設備橫屏時，文字能夠顯示的更多，就像這個樣子：

圖圖圖圖							文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
圖圖圖圖
圖圖圖圖

可是圖片的固定寬度的，在橫屏時它不須要佔用40%這麼大的位置，咱們期待會這樣排列：

圖圖圖圖	文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
圖圖圖圖
圖圖圖圖

若是不使用浮動的話，那麼flex佈局將是一個不錯的選擇。元素能夠靈活分配固定寬度元素以外的剩餘空間。本里中就是最大化地爲文字提供了儘可能多的顯示空間。相似的，一個佔滿一行而又須要左邊補白20px的元素，無需設置寬度爲calc(100% - 20px),固然，calc支持度也不夠普遍。

此外水平居中定位更簡單了。在這之前垂直居中稍顯棘手，要麼使用負外邊距，要麼使用display:table-cell。如今可使用：

-webkit-box-align: center;//老語法
-webkit-align-items: center;//新語法

就能夠達到。

##總結雖然老版本的flex語法難以匹敵新版語法，可是仍然有不少支持普遍而且有用的特性。

像下面這樣寫CSS，能夠方便的應用flex帶來的排版上的方便。

.f-f{display: -webkit-box;display: -webkit-flex;}
.f-vc{-webkit-box-align:center;-webkit-align-items:center;}/*垂直居中*/
.f-hc{-webkit-box-pack:center;-webkit-justify-content:center;}/*水平居中*/
.f-hr{-webkit-box-pack:end;-webkit-justify-content:flex-end;}/*向右靠攏*/
.f-hl{-webkit-box-pack:start;-webkit-justify-content:flex-start;}/*向左靠攏*/

固然flex的功能遠遠不止這些，使用新版flex語法將帶來更大的靈活性。有人將各類flex語法寫成Sass：

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex:  $values;
-webkit-flex:  $values;
-ms-flex:  $values;
flex:  $values;
}

@mixin order($val) {
-webkit-box-ordinal-group: $val;  
-moz-box-ordinal-group: $val;     
-ms-flex-order: $val;     
-webkit-order: $val;  
order: $val;
}

若是你的頁面只須要應付webkit瀏覽器，那麼徹底不用考慮兼容性。除此以外，你還能夠考慮應用新版本的語法，雖然支持的移動瀏覽器還不錯，不過，向後優化老是好的。

Android版的Firefox表現的Flex多少與webkit有所不一樣，我建議直接退化採用浮動的佈局方式。 ##參考