移動端Flex 佈局新舊混合兼容

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

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

舊語法篇

定義容器的display屬性

.box{
 display: -moz-box; 
 display: -webkit-box; 
 display: box;
}

容器屬性

1.box-pack 屬性

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

.box{
 -moz-box-pack: center; 
 -webkit-box-pack: center; 
 box-pack: center;
}

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

.box{
 box-pack: start | end | center | justify;
 
}

2.box-align 屬性

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

.box{
 -moz-box-align: center; 
 -webkit-box-align: center; 
 box-align: center;
}

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

.box{
 box-align: start | end | center | baseline | stretch;
 
}

3.box-direction 屬性

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

.box{
 -moz-box-direction: reverse; 
 -webkit-box-direction: reverse; 
 box-direction: reverse;
}

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

.box{
 box-direction: normal | reverse | inherit;
 
}

4.box-orient 屬性

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

.box{
 -moz-box-orient: horizontal; 
 -webkit-box-orient: horizontal; 
 box-orient: horizontal;
}

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

.box{
 box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
 
}

5.box-lines 屬性

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

.box{
 -moz-box-lines: multiple; 
 -webkit-box-lines: multiple; 
 box-lines: multiple;
}

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

.box{
 box-lines: single | multiple;
 
}

子元素屬性

1.box-flex 屬性

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

.item{
 -moz-box-flex: 1.0; 
 -webkit-box-flex: 1.0; 
 box-flex: 1.0;
}

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

.item{
 box-flex: <value>;

}

2.box-ordinal-group 屬性

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

.item{
 -moz-box-ordinal-group: 1; 
 -webkit-box-ordinal-group: 1; 
 box-ordinal-group: 1;
}

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

.item{
 box-ordinal-group: <integer>;

}

新版語法

定義容器的display屬性

.box{
 display: -webkit-flex; 
 display: flex;
}


.box{
 display: -webkit-inline-flex; 
display:inline-flex;
}

容器樣式

.box{
 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;
 

 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 
}

子元素屬性

.item{
 order: <integer>;


 flex-grow: <number>; 


 flex-shrink: <number>; 


 flex-basis: <length> | auto; 


 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 

 align-self: auto | flex-start | flex-end | center | baseline | stretch;
 
}

兼容寫法

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

.box{
 display: -webkit-box; 
 display: -moz-box; 
 display: -ms-flexbox; 
 display: -webkit-flex; 
 display: flex; 
}

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

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

子元素主軸對齊方式

.box{
 -webkit-box-pack: center;
 -moz-justify-content: center;
 -webkit-justify-content: center;
 justify-content: center;
}

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

.box{
 box-pack: start | end | center | justify;
 

 justify-content: flex-start | flex-end | center | space-between | space-around;
 
}

子元素交叉軸對齊方式

.box{
 -webkit-box-align: center;
 -moz-align-items: center;
 -webkit-align-items: center;
 align-items: center;
}

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

.box{
 box-align: start | end | center | baseline | stretch;
 

 align-items: flex-start | flex-end | center | baseline | stretch;
 
}

子元素的顯示方向

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

左到右

.box{
 -webkit-box-direction: normal;
 -webkit-box-orient: horizontal;
 -moz-flex-direction: row;
 -webkit-flex-direction: row;
 flex-direction: row;
}

右到左

.box{
 -webkit-box-pack: end;
 -webkit-box-direction: reverse;
 -webkit-box-orient: horizontal;
 -moz-flex-direction: row-reverse;
 -webkit-flex-direction: row-reverse;
 flex-direction: row-reverse;
}

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

上到下

.box{
 -webkit-box-direction: normal;
 -webkit-box-orient: vertical;
 -moz-flex-direction: column;
 -webkit-flex-direction: column;
 flex-direction: column;
}

下到上

.box{
 -webkit-box-pack: end;
 -webkit-box-direction: reverse;
 -webkit-box-orient: vertical;
 -moz-flex-direction: column-reverse;
 -webkit-flex-direction: column-reverse;
 flex-direction: column-reverse;
}

是否允許子元素伸縮

.item{
 -webkit-box-flex: 1.0;
 -moz-flex-grow: 1;
 -webkit-flex-grow: 1;
 flex-grow: 1;
}

.item{
 -webkit-box-flex: 1.0;
 -moz-flex-shrink: 1;
 -webkit-flex-shrink: 1;
 flex-shrink: 1;
}

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

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

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

參數：

.item{
 box-flex: <value>;


 flex-grow: <number>; 


 flex-shrink: <number>; 

}

子元素的顯示次序

.item{
 -webkit-box-ordinal-group: 1;
 -moz-order: 1;
 -webkit-order: 1;
 order: 1;
}