2009年，W3C提出了一種嶄新的方案----Flex佈局（即彈性伸縮佈局），它可以簡便、完整、響應式地實現各種頁面佈局，包括一直讓人很頭疼的垂直水平居中也變得很簡單地就迎刃而解了。但是這個佈局方式還處於W3C的草案階段，並且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。其中混合過渡版本主要是針對IE10做了相容。目前flex佈局用得比較多的還是在移動端的佈局，所以本次主要講解一下舊版本和新版本在移動端使用的各個知識點，讓大家對神祕的flex佈局熟悉起來。

舊版本（box）

首先看一下瀏覽器相容情況：

PS：瀏覽器相容資料不一定很準確，不過相差不大。

下面將通過一個簡單的例項來講解舊版本的各個屬性：

html程式碼：

<div>
    <p>發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃哈薩克的骨灰撒塊光輝卡薩很乾淨啊是高科技傻空給發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃哈薩克的骨灰撒塊光輝卡薩很乾淨啊是高科技傻空給</p>
    <p>發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃哈薩克的骨灰撒塊光輝卡薩很乾淨啊是高科技傻空給</p>
    <p>發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃</p>
</div>

可以看到我們這個例子是很簡單的，一個div元素內包含三個p元素，它們都是塊元素（block）。接下來給段落加一些基礎的樣式：

p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

此時重新整理網頁看到的結果是這樣的：

這個結果很正常吧！OK，現在我們給div元素設定為box,看看有什麼變化：

div{
    display:-webkit-box;
    display:box;
}

我們再次重新整理網頁，結果是這樣的：

看到了吧，現在每一個p元素都變成一個box了，這就是彈性佈局的神奇所在！

在上面中，我們將div元素的display設定為box，這就是舊版本的彈性佈局。對於比較舊的瀏覽器版本，我們需要加上-webkit-字首。

舊版本的彈性佈局有兩個屬性值：

•  box : 將容器盒模型作為塊級彈性伸縮盒顯示
•   inline-box : 將容器盒模型作為內聯級彈性伸縮盒顯示

PS：我們知道塊級它是佔用整行的，比如div元素；而內聯級不佔用整行，比如span元素。但是我們設定了整個盒子，他們都不佔用，保持一致。就像我們上面的例子一樣，給div元素設定了盒子，那麼div元素裡面的p元素就不佔用了。

下面介紹舊版本彈性佈局的各個屬性：

box-orient 屬性

box-orient屬性主要實現盒子內部元素的流動方向。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

此時的結果就是垂直排列：

此屬性的屬性值有：

• horizontal ： 伸縮專案從左到右水平排列
•     vertical  ： 伸縮專案從上到下垂直排列
• inline-axis ： 伸縮專案沿著內聯軸排列顯示
• block-axis ： 伸縮專案沿著塊軸排列顯示

大家不妨試一下：horizontal 和 inline-axis 都是水平排列，而vertical 和 block-axis 都是垂直排列。

box-direction屬性

box-direction 屬性主要是設定伸縮容器中的流動順序。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

這樣我們的排序就是反序的了，執行結果為：

此屬性的屬性值有：

• normal  : 正常順序，預設值
• reverse : 反序

box-pack屬性

box-pack 屬性用於伸縮專案的分佈方式。

此屬性的屬性值有：

• start   :  伸縮專案以起始點靠齊
•   end   :  伸縮專案以結束點靠齊
• center :  伸縮專案以中心點靠齊
• justify  :  伸縮專案平局分佈

下面我們都試一下各個屬性值的效果：

1.start屬性值

div{
    -webkit-box-pack:start;
    box-pack:start;
}

這個就是預設靠齊方式：

2.end屬性值

div{
    -webkit-box-pack:

;
    box-pack:

;
}

這個就是以結束點靠齊：

3.center屬性值

div{
    -webkit-box-pack:

;
    box-pack:

;
}

這就是居中對齊效果：

4.justify屬性值

div{
    -webkit-box-pack:

;
    box-pack:

;
}

這個就是平均分佈效果：

PS:垂直方向上也是一樣的原理，但如果height為auto的話，效果將出不來。所以需要給height設定一個定高（最好比預設情況高）。這時，就能看到在垂直方向上的效果了。這裡我就不再贅述了。

box-align屬性

box-align 屬性用來處理伸縮容器的額外空間。

此屬性的屬性值有：

•      start  ： 伸縮專案以頂部為基準，清理下部額外空間
•      end    ： 伸縮專案以底部為基準，清理上部額外空間
•    center ： 伸縮專案以中部為基準，平均清理上下部額外空間
• baseline ： 伸縮專案以基線為基準，清理額外的空間
• stretch  ： 伸縮專案填充整個容器，預設值

同樣的，我們將試一下每個屬性值的效果：

1.start屬性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

效果如下：

2.end屬性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:

;
    box-align:

;
}

效果如下：

3.center屬性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:

;
    box-align:

;
}

效果如下：

4.baseline屬性值

如果box-orient是內嵌單軸或橫向，所有的子元素都置於他們的基線對齊。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效果如下：

而如果box-orient是塊軸或者垂直方向的，那麼所有的子元素都將居中垂直排列。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:

;
    box-orient:vertical;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效果如下：

5.stretch屬性值

所有子元素拉伸以填充包含區塊。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:

;
    box-align:

;
}

效果如下：

box-flex屬性

box-flex 屬性可以使用浮點數分配伸縮專案的比例。此屬性是給容器內的專案設定的，它們會基於父容器的寬度來分配它們所佔的比例：

p:nth-child(1){
    -webkit-box-flex:1;
    box-flex:1;
}
p:nth-child(2){
    -webkit-box-flex:3;
    box-flex:3;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

效果如下：

當然也可以有些專案是固定寬度的，那麼其他的專案也會分配剩餘的寬度，比如這裡第一個p元素設定為固定寬度：

p:nth-child(2){
    -webkit-box-flex:2;
    box-flex:2;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

效果如下：

更多使用情況，大家可以自己慢慢去嘗試。

box-ordinal-group 屬性

box-ordinal-group 屬性可以設定伸縮專案的顯示位置。

p:nth-child(1){
    -webkit-box-ordinal-group:2;
    box-ordinal-group:2;
}
p:nth-child(2){
    -webkit-box-ordinal-group:3;
    box-ordinal-group:3;
}
p:nth-child(3){
    -webkit-box-ordinal-group:1;
    box-ordinal-group:1;
}

效果如下：

可以看到：第一個p元素排在了第二，第二個p元素排在了第三，第三個p元素排在了第一。可以單獨給某一個p元素設定此屬性，其他專案會按照原來的順序做變動。

OK，那麼舊版本的所有屬性就簡單的介紹完了，更多結合的用法還是根據需要自己多動手去練習一下。

這裡舉一個水平垂直居中的例子：

div{
    display:-webkit-box;
    display:box;
    height:500px;
    border:1px solid #f00;
    -webkit-box-pack:center;
    box-pack:center;
    -webkit-box-align:center;
    box-align:center;
}

那麼效果就是這樣的了：

此時我們再給p元素設定一個固定的高度：

p{
    width:150px;
    height:200px;
}

那麼這時的效果就是：

-----------------------------------------------------------------------------------------------------------------------------

新版本的Flexbox模型是2012年9月提出的工作草案，這個草案是由W3C 推出的最新語法。這個版本立志於指定標準，讓新式的瀏覽器全面相容，在未來瀏覽器的更新換代中實現統一。

這裡我們還是繼續上一篇部落格中的例子，使用最新版本的flex佈局來實現相同的效果。

html程式碼：

<div>
    <p>發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃哈薩克的骨灰撒塊光輝卡薩很乾淨啊是高科技傻空給發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃哈薩克的骨灰撒塊光輝卡薩很乾淨啊是高科技傻空給</p>
    <p>發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃哈薩克的骨灰撒塊光輝卡薩很乾淨啊是高科技傻空給</p>
    <p>發生過的空間還是看價格哈健康啊水果和卡刷卡更何況規劃</p>
</div>

基礎的css程式碼：

p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

此時我們給div元素設定display屬性為flex :

div{
    display:flex;
}

重新整理瀏覽器後的效果是：

可以看到效果跟舊版本的-webkit-box是一樣的。

在新版本中設定為彈性伸縮盒的display屬性值有兩個：

• flex ： 將容器盒模型作為塊級彈性伸縮盒顯示
• inline-flex ： 將容器盒模型作為內聯級彈性伸縮盒顯示

看一下新版本的flex佈局的瀏覽器相容情況：

PS：可以看到，在一些比較舊的webkit核心的瀏覽器（Chrome，Safari）中，我們需要使用-webkit-flex來做相容，但是這裡我就省略了。

下面將逐一介紹flex佈局的各個屬性的基礎用法：

flex-direction屬性

flex-direction屬性用於設定伸縮專案的排列方式。

div{
    display:flex;
    flex-direction:column;
}

效果如下：

結果就是容器內的所有專案按照從上到下排列的。

當你設定為row-reverse時，效果就是：

這個是從瀏覽器的右邊往左邊排列的。

此屬性的屬性值有：

• row ： 設定從左到