Flex佈局新舊混合寫法詳解（相容微信）

flex是個非常好用的屬性，如果說有什麼可以完全代替 float 和 position ，那麼肯定是非它莫屬了（雖然現在還有很多不支援flex 的瀏覽器）。然而在移動開發中，本來絕大多數瀏覽器（包括安卓2.3以上的自帶瀏覽器）都支援的屬性，偏偏有個例外，就是國產某某X5核心神器（不知哪個版本的webkit，僅支援 display:box），自主研發這東西也不好多說什麼了，下面入正題。

首先還是從兩個版本的語法開始講吧，這裡還是假設flex容器為 .box ，子元素為 .item 。

舊語法篇

定義容器的display屬性

容器屬性

1.box-pack 屬性

box-pack定義子元素主軸對齊方式。

box-pack屬性總共有4個值：

2.box-align 屬性

box-align定義子元素交叉軸對齊方式。

box-align屬性總共有5個值：

3.box-direction 屬性

box-direction定義子元素的顯示方向。

box-direction屬性總共有3個值：

4.box-orient 屬性

box-orient定義子元素是否應水平或垂直排列。

box-orient屬性總共有5個值：

5.box-lines 屬性

box-lines定義當子元素超出了容器是否允許子元素換行。

box-lines屬性總共有2個值：

子元素屬性

1.box-flex 屬性

box-flex定義是否允許當前子元素伸縮。

box-flex屬性使用一個浮點值：

2.box-ordinal-group 屬性

box-ordinal-group定義子元素的顯示次序，數值越小越排前。

box-direction屬性使用一個整數值：

新版語法

定義容器的display屬性

容器樣式

子元素屬性

相容寫法

首先是定義容器的 display 屬性：

由於舊版語法並沒有列入W3C標準，所以這裡不用寫 display:box ，下面的語法也是一樣的。

這裡還要注意的是，如果子元素是行內元素，在很多情況下都要使用 display:block 或 display:inline-block 把行內子元素變成塊元素（例如使用 box-flex 屬性），這也是舊版語法和新版語法的區別之一。

子元素主軸對齊方式

這裡舊版語法有4個引數，而新版語法有5個引數，相容寫法新版語法的 space-around 是不可用的：

子元素交叉軸對齊方式

這裡的引數除了寫法不同，其實是功能是一樣的：

子元素的顯示方向

子元素的顯示方向可通過 box-direction + box-orient + flex-direction 實現，下面請看例項：

左到右

右到左

這裡補充說明一點： box 寫法的 box-direction 只是改變了子元素的排序，並沒有改變對齊方式，需要新增一個 box-pack 來改變對齊方式。

上到下

下到上

是否允許子元素伸縮

上面是允許放大，box語法中 box-flex 如果不是0就表示該子元素允許伸縮，而flex是分開的，上面 flex-grow 是允許放大（預設不允許），下面的 flex-shrink 是允許縮小（預設允許）。box-flex 預設值為0，也就是說，在預設的情況下，在兩個瀏覽器中的表現是不一樣的：

這裡還有一點，就是新舊語法的演算法是不一樣的，假設 box-flex 的值不等於0，舊語法中，如果有多餘的空間，box-flex 的值越大，說明空白部分的佔比越多，反之亦然：

而新版的語法中，放大的比例是直接按 flex-grow 的值來分配的，flex-grow 的縮放會覆蓋 flex-shrink:0，看例子：

引數：

子元素的顯示次序

不足之處請多指點，本文不斷更新。