CSS3 提供一種嶄新的佈局方式：Flexbox 佈局，即彈性伸縮佈局模型(Flexible Box)。用來提供一個更加有效的方式實現響應式佈局。但是用於這個佈局方式還處於 W3C 的草案階段，並且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。在發展中，可能還有各種改動，瀏覽器的相容性還存在問題。 首先，我們來看下舊版本的瀏覽器相容情況：  以上的資料，我們摘自 CSS3 手冊上的。當然，不同的教材和文章的會略有不同。但誤差率也就一到兩個版本，影響不大。 首先，第一步：先建立一段內容，分成三個區域。 //HTML 部分

第一段內容…

第二段內容…

第三段內容…

//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 月份設定的工作草案，屬於舊版本。它面向的是一些早期瀏覽器的彈性佈局方案。 首先，我們要將幾個需要佈局模組的父元素設定一下容器屬性 display。

我們知道塊級它是佔用整行的，類似

元素；而內聯級不佔用整行，類似 元素。但是我們設定了整個盒子，他們都不佔用，保持一致。 //設定彈性，以火狐為例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; }