CSS3 彈性伸縮布局

CSS3 提供一種嶄新的布局方式：Flexbox 布局，即彈性伸縮布局模型(Flexible Box)。用來提供一個更加有效的方式實現(xiàn)響應(yīng)式布局。但是用于這個布局方式還處于 W3C 的草案階段，并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。在發(fā)展中，可能還有各種改動，瀏覽器的兼容性還存在問題。
首先，我們來看下舊版本的瀏覽器兼容情況：

以上的數(shù)據(jù)，我們摘自 CSS3 手冊上的。當(dāng)然，不同的教材和文章的會略有不同。但誤差率也就一到兩個版本，影響不大。
首先，第一步：先創(chuàng)建一段內(nèi)容，分成三個區(qū)域。

//HTML 部分
<div>
<p>第一段內(nèi)容...</p>
<p>第二段內(nèi)容...</p>
<p>第三段內(nèi)容...</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;
}

通過以上設(shè)置，在除了 IE 瀏覽器外，布局實現(xiàn)了水平分布。那么下面，我們就重點研究一下這些屬性的含義。

舊版本
如果屬性和屬性值為：display:box，那么就是 2009 年 7 月份設(shè)定的工作草案，屬于舊版本。它面向的是一些早期瀏覽器的彈性布局方案。
首先，我們要將幾個需要布局模塊的父元素設(shè)置一下容器屬性 display。

我們知道塊級它是占用整行的，類似<div>元素；而內(nèi)聯(lián)級不占用整行，類似<span> 元素。但是我們設(shè)置了整個盒子，他們都不占用，保持一致。
//設(shè)置彈性，以火狐為例div {
display: -moz-box;
}

1.box-orient 屬性
box-orient 主要實現(xiàn)盒子內(nèi)部元素的流動方向。
//設(shè)置垂直流動div {
-webkit-box-orient: vertical;
}

2.box-direction
box-direction 屬性主要是設(shè)置伸縮容器中的流動順序。
//設(shè)置逆序
div {
-moz-box-direction: reverse;
}

3.box-pack
box-pack 屬性用于伸縮項目的分布方式。
//分布方式已結(jié)束位置靠齊div {
-moz-box-pack: end;
}

4.box-align
box-align 屬性用來處理伸縮容器的額外空間。
//居中對齊，清理上下額外空間div {
-moz-box-align: center;
}

5.box-flex
box-flex 屬性可以使用浮點數(shù)分配伸縮項目的比例
//設(shè)置每個伸縮項目占用的比例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 屬性可以設(shè)置伸縮項目的顯示位置。
//將第一個位置的元素，跳轉(zhuǎn)到第三個位置p:nth-child(1) {
-moz-box-ordinal-group: 3;
}

混合過渡版
混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是針對 IE10 瀏覽器實現(xiàn)的伸縮布局效果，其功能和舊版本的屬性大同小異。我們還是采用上一節(jié)課的文件，然后使用 混合過渡代碼，實現(xiàn) IE10 的伸縮布局。
首先，設(shè)置伸縮盒的 display 有如下兩個屬性值：

//需要 IE 前綴-ms- div {
display: -ms-flexbox;
}

1.flex-direction
flex-direction 屬性和舊版本 box-orient 屬性一樣，都是設(shè)置伸縮項目的排列方
式。
//設(shè)置從上往下排列div {
-ms-flex-direction: column;
}

2.flex-wrap
flex-wrap 屬性類似與舊版本中的 box-lines，但是 box-lines 我們沒有講解，原因是沒有瀏覽器支持它。
//設(shè)置無法容納時，自動換行div {
-ms-flex-wrap: wrap;
}

3.flex-flow
flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。
//簡寫形式div {
-ms-flex-flow: row wrap;
}

4.flex-pack
flex-pack 屬性和舊版本中的 box-pack 一樣，設(shè)置伸縮項目的對其方式。
//按照中心點對齊div {
-ms-flex-pack: center;
}

5.flex-align
flex-align 屬性和舊版本中的 box-align 一樣，處理伸縮項目容器的額外空間。
//處理額外空間div {
-ms-flex-align: center;
}

6.flex
flex 屬性和舊版本中的 box-flex 類似，用來控制伸縮容器的比例分配。
//設(shè)置比例分配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 屬性一樣控制伸縮項目出現(xiàn)的順序。
//設(shè)置伸縮項目順序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 推出的最新語法。這個版本立志于指定標(biāo)準(zhǔn)，讓新式的瀏覽器全面兼容，在未來瀏覽器的更新?lián)Q代中 實現(xiàn)了統(tǒng)一。
首先，設(shè)置伸縮盒的 display 有如下兩個屬性值：


3.flex-flow
flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。
//簡寫形式div {
flex-flow: row wrap;
}

4.justify-content
justify-content 屬性和舊版本中的 box-pack 一樣，設(shè)置伸縮項目的對其方式。
//按照中心點對齊div {
justify-content: space-around;
}