flex是個非常好用的屬性，如果說有什么可以完全代替 float和 position，那么肯定是非它莫屬了（雖然現(xiàn)在還有很多不支持 flex 的瀏覽器）。然而在移動開發(fā)中，本來絕大多數(shù)瀏覽器（包括安卓2.3以上的自帶瀏覽器）都支持的屬性亩码，偏偏有個例外，就是國產(chǎn)某某X5內(nèi)核神器（不知哪個版本的webkit野瘦，僅支持 display:box）描沟，自主研發(fā)這東西也不好多說什么了，下面入正題鞭光。
首先還是從兩個版本的語法開始講吧吏廉，這里還是假設(shè)flex容器為 .box ，子元素為 .item惰许。
<h3>舊語法篇</h3>
定義容器的display屬性
.box{
display: -moz-box; /*Firefox*/
display: -webkit-box; /*Safari,Opera,Chrome*/
display: box;
}```
<h4>容器屬性</h4>
<b>1.box-pack 屬性</b>
box-pack定義子元素主軸對齊方式席覆。
.box{
-moz-box-pack: center; /Firefox/
-webkit-box-pack: center; /Safari,Opera,Chrome/
box-pack: center;
}```
box-pack屬性總共有4個值：
.box{
box-pack: start | end | center | justify;
/*主軸對齊：左對齊（默認(rèn)） | 右對齊 | 居中對齊 | 左右對齊*/
}```
<b>2.box-align 屬性</b>
box-align定義子元素交叉軸對齊方式。
.box{
-moz-box-align: center; /Firefox/
-webkit-box-align: center; /Safari,Opera,Chrome/
box-align: center;
}```
box-align屬性總共有5個值：
.box{
box-align: start | end | center | baseline | stretch;
/*交叉軸對齊：頂部對齊（默認(rèn)） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊并鋪滿*/
}```
<b>3.box-direction 屬性</b>
box-direction定義子元素的顯示方向汹买。
.box{
-moz-box-direction: reverse; /Firefox/
-webkit-box-direction: reverse; /Safari,Opera,Chrome/
box-direction: reverse;
}```
box-direction屬性總共有3個值：
.box{
box-direction: normal | reverse | inherit;
/*顯示方向：默認(rèn)方向 | 反方向 | 繼承子元素的 box-direction*/
}```
4.box-orient 屬性
box-orient定義子元素是否應(yīng)水平或垂直排列佩伤。
.box{
-moz-box-orient: horizontal; /Firefox/
-webkit-box-orient: horizontal; /Safari,Opera,Chrome/
box-orient: horizontal;
}```
box-orient屬性總共有5個值：
.box{
box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
/*排列方向：水平 | 垂直 | 行內(nèi)方式排列（默認(rèn)） | 塊方式排列 | 繼承父級的box-orient*/
}```
<b>5.box-lines 屬性</b>
box-lines定義當(dāng)子元素超出了容器是否允許子元素?fù)Q行。
.box{
-moz-box-lines: multiple; /Firefox/
-webkit-box-lines: multiple; /Safari,Opera,Chrome/
box-lines: multiple;
}```
box-lines屬性總共有2個值：
.box{
box-lines: single | multiple;
/*允許換行：不允許（默認(rèn)） | 允許*/
}```
<h4>子元素屬性</h4>
<b>1.box-flex 屬性</b>
box-flex定義是否允許當(dāng)前子元素伸縮晦毙。
.item{
-moz-box-flex: 1.0; /Firefox/
-webkit-box-flex: 1.0; /Safari,Opera,Chrome/
box-flex: 1.0;
}```
box-flex屬性使用一個浮點值：
.item{
box-flex: <value>;
/*伸縮：<一個浮點數(shù)生巡，默認(rèn)為0.0，即表示不可伸縮结序，大于0的值可伸縮障斋，柔性相對>*/
}```
<b>2.box-ordinal-group 屬性</b>
box-ordinal-group定義子元素的顯示次序纵潦，數(shù)值越小越排前徐鹤。
.item{
-moz-box-ordinal-group: 1; /Firefox/
-webkit-box-ordinal-group: 1; /Safari,Opera,Chrome/
box-ordinal-group: 1;
}```
box-direction屬性使用一個整數(shù)值：
.item{
box-ordinal-group: <integer>;
/*顯示次序：<一個整數(shù)，默認(rèn)為1邀层，數(shù)值越小越排前>*/
}```
</br>
----
<h3>新版語法</h3>
定義容器的display屬性
.box{
display: -webkit-flex; /webkit/
display: flex;
}
/行內(nèi)flex/
.box{
display: -webkit-inline-flex; /webkit/
display:inline-flex;
}```
容器樣式
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主軸方向：左到右（默認(rèn)） | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*換行：不換行（默認(rèn)） | 換行 | 換行并第一行在下方*/
flex-flow: <flex-direction> || <flex-wrap>;
/*主軸方向和換行簡寫*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主軸對齊方式：左對齊（默認(rèn)） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對齊方式：頂部對齊（默認(rèn)） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主軸對齊：頂部對齊（默認(rèn)） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 上下平均分布*/
}```
子元素屬性
.item{
order: <integer>;
/排序：數(shù)值越小返敬，越排前，默認(rèn)為0/
flex-grow: <number>;
/* default 0 //放大：默認(rèn)0（即如果有剩余空間也不放大寥院，值為1則放大劲赠，2是1的雙倍大小，以此類推）/
flex-shrink: <number>;
/ default 1 //縮薪招弧：默認(rèn)1（如果空間不足則會縮小凛澎，值為0不縮小）/
flex-basis: <length> | auto;
/ default auto //固定大泄捞恪：默認(rèn)為0塑煎，可以設(shè)置px值，也可以設(shè)置百分比大小/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/flex-grow, flex-shrink 和 flex-basis的簡寫臭蚁，默認(rèn)值為0 1 auto最铁，/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/單獨對齊方式：自動（默認(rèn)） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/
}```
</br>
<h3>兼容寫法</h3>
首先是定義容器的 display屬性：
.box{
display: -webkit-box;
/* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;
/* 老版本語法: Firefox (buggy) */
display: -ms-flexbox;
/* 混合版本語法: IE 10 */
display: -webkit-flex; /* 新版本語法: Chrome 21+ */
display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}```
由于舊版語法并沒有列入W3C標(biāo)準(zhǔn)讯赏，所以這里不用寫 display:box ，下面的語法也是一樣的冷尉。
這里還要注意的是漱挎，如果子元素是行內(nèi)元素，在很多情況下都要使用 display:block 或 display:inline-block把行內(nèi)子元素變成塊元素（例如使用 box-flex屬性）雀哨，這也是舊版語法和新版語法的區(qū)別之一磕谅。
<b>子元素主軸對齊方式</b>
.box{
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}```
這里舊版語法有4個參數(shù)，而新版語法有5個參數(shù)震束，兼容寫法新版語法的 space-around是不可用的：
.box{
box-pack: start | end | center | justify;
/*主軸對齊：左對齊（默認(rèn)） | 右對齊 | 居中對齊 | 左右對齊*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主軸對齊方式：左對齊（默認(rèn)） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/
}```
<b>子元素交叉軸對齊方式</b>
.box{
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}```
這里的參數(shù)除了寫法不同怜庸，其實是功能是一樣的：
.box{
box-align: start | end | center | baseline | stretch;
/*交叉軸對齊：頂部對齊（默認(rèn)） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊并鋪滿*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對齊方式：頂部對齊（默認(rèn)） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/
}```
<b>子元素的顯示方向</b>
子元素的顯示方向可通過 box-direction + box-orient + flex-direction實現(xiàn)，下面請看實例：
左到右
.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來改變對齊方式。
[](http://source.ccwebsite.com/wp-content/uploads/2015/11/fx02.png)
上到下
.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;
}```
[](http://source.ccwebsite.com/wp-content/uploads/2015/11/fx04.png)
是否允許子元素伸縮
.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;
}```
[](http://source.ccwebsite.com/wp-content/uploads/2015/11/fx15.png)
上面是允許放大嘉栓，box語法中 box-flex如果不是0就表示該子元素允許伸縮宏榕，而flex是分開的，上面 flex-grow是允許放大（默認(rèn)不允許）侵佃，下面的 flex-shrink是允許縮新橹纭（默認(rèn)允許）。box-flex默認(rèn)值為0馋辈，也就是說抚芦，在默認(rèn)的情況下，在兩個瀏覽器中的表現(xiàn)是不一樣的：
[](http://source.ccwebsite.com/wp-content/uploads/2015/11/fx11.png)
這里還有一點迈螟，就是新舊語法的算法是不一樣的叉抡，假設(shè) box-flex的值不等于0，舊語法中答毫，如果有多余的空間褥民，box-flex的值越大，說明空白部分的占比越多洗搂，反之亦然：
[](http://source.ccwebsite.com/wp-content/uploads/2015/11/fx13.png)
而新版的語法中消返，放大的比例是直接按 flex-grow的值來分配的，flex-grow的縮放會覆蓋 flex-shrink:0
耘拇，看例子：
[](http://source.ccwebsite.com/wp-content/uploads/2015/11/fx14.png)
參數(shù)：
.item{
box-flex: <value>;
/伸縮：<一個浮點數(shù)撵颊，默認(rèn)為0.0，即表示不可伸縮惫叛，大于0的值可伸縮倡勇，柔性相對>/
flex-grow: <number>;
/* default 0 //放大：默認(rèn)0（即如果有剩余空間也不放大，值為1則放大挣棕，2是1的雙倍大小译隘，以此類推）/
flex-shrink: <number>;
/ default 1 //縮星浊拧：默認(rèn)1（如果空間不足則會縮小，值為0不縮泄淘拧）*/
}```
子元素的顯示次序
.item{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}```
[](http://source.ccwebsite.com/wp-content/uploads/2015/11/fx16.png)