CSS3 彈性伸縮布局
首先，我們來看下舊版本的瀏覽器兼容情況：
以上的數據，我們摘自 CSS3 手冊上的。當然，不同的教材和文章的會略有不同。但誤差率也就一到兩個版本，影響不大。
首先，第一步：先創建一段內容，分成三個區域。
//HTML 部分
<div>
<p>第一段內容...</p>
<p>第二段內容...</p>
</div>
//CSS 部分
p {
width: 150px;
border: 1px solid gray; background-color: silver; margin: 5px;
padding: 5px;
}
div {
display: -moz-box; display: -webkit-box; display: box;
}
通過以上設置，在除了 IE 瀏覽器外，布局實現了水平分布。那麽下面，我們就重點研究一下這些屬性的含義。
舊版本
如果屬性和屬性值為：display:box，那麽就是 2009 年 7 月份設定的工作草案，屬於舊版本。它面向的是一些早期瀏覽器的彈性布局方案。
我們知道塊級它是占用整行的，類似<div>元素；而內聯級不占用整行，類似<span> 元素。但是我們設置了整個盒子，他們都不占用，保持一致。
//設置彈性，以火狐為例div {
display: -moz-box;
}
1.box-orient 屬性
box-orient 主要實現盒子內部元素的流動方向。
//設置垂直流動div {
-webkit-box-orient: vertical;
}
2.box-direction
box-direction 屬性主要是設置伸縮容器中的流動順序。
//設置逆序
div {
-moz-box-direction: reverse;
3.box-pack
box-pack 屬性用於伸縮項目的分布方式。
//分布方式已結束位置靠齊div {
-moz-box-pack: end;
}
4.box-align
box-align 屬性用來處理伸縮容器的額外空間。
//居中對齊，清理上下額外空間div {
-moz-box-align: center;
}
5.box-flex
box-flex 屬性可以使用浮點數分配伸縮項目的比例
//設置每個伸縮項目占用的比例p:nth-child(1) {
-moz-box-flex: 1;
}
p:nth-child(2) {
-moz-box-flex: 2.5;
}
p:nth-child(3) {
-moz-box-flex: 1;
}
6.box-ordinal-group
box-ordinal-group 屬性可以設置伸縮項目的顯示位置。
//將第一個位置的元素，跳轉到第三個位置p:nth-child(1) {
-moz-box-ordinal-group: 3;
}
混合過渡版
混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是針對 IE10 瀏覽器實現的伸縮布局效果，其功能和舊版本的屬性大同小異。我們還是采用上一節課的文件，然後使用 混合過渡代碼，實現 IE10 的伸縮布局。
首先，設置伸縮盒的 display 有如下兩個屬性值：
//需要 IE 前綴-ms- div {
display: -ms-flexbox;
}
1.flex-direction
flex-direction 屬性和舊版本 box-orient 屬性一樣，都是設置伸縮項目的排列方
式。
//設置從上往下排列div {
-ms-flex-direction: column;
}
2.flex-wrap
flex-wrap 屬性類似與舊版本中的 box-lines，但是 box-lines 我們沒有講解，原因是沒有瀏覽器支持它。
//設置無法容納時，自動換行div {
-ms-flex-wrap: wrap;
}
3.flex-flow
flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。
//簡寫形式div {
-ms-flex-flow: row wrap;
}
4.flex-pack
flex-pack 屬性和舊版本中的 box-pack 一樣，設置伸縮項目的對其方式。
//按照中心點對齊div {
-ms-flex-pack: center;
}
5.flex-align
flex-align 屬性和舊版本中的 box-align 一樣，處理伸縮項目容器的額外空間。
//處理額外空間div {
-ms-flex-align: center;
}
6.flex
flex 屬性和舊版本中的 box-flex 類似，用來控制伸縮容器的比例分配。
//設置比例分配p:nth-child(1) {
-ms-flex: 1;
}
p:nth-child(2) {
-ms-flex: 3;
}
p:nth-child(3) {
-ms-flex: 1;
}
7.flex-order
flex-order 屬性和 box-ordinal-group 屬性一樣控制伸縮項目出現的順序。
//設置伸縮項目順序p:nth-child(1) {
-ms-flex-order: 2;
}
p:nth-child(2) {
-ms-flex-order: 3;
}
p:nth-child(3) {
-ms-flex-order: 1;
}
新版本
新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案，這個草案是由 W3C 推出的最新語法。這個版本立誌於指定標準，讓新式的瀏覽器全面兼容，在未來瀏覽器的更新換代中 實現了統一。
首先，設置伸縮盒的 display 有如下兩個屬性值：
3.flex-flow
flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。
//簡寫形式div {
flex-flow: row wrap;
}
4.justify-content
justify-content 屬性和舊版本中的 box-pack 一樣，設置伸縮項目的對其方式。
//按照中心點對齊div {
justify-content: space-around;
}
CSS3 彈性伸縮布局