# 第 29 章 CSS3 彈性伸縮布局[中] 學習要點： 1.混合過度版 主講教師：李炎恢 本章主要探討 HTML5?中 CSS3?提供的用來實現未來響應式彈性伸縮布局方案，這里做一個初步的了解。 **一．混合過渡版** 混合版本的 Flexbox?模型是 2011?年提出的工作草案，主要是針對 IE10?瀏覽器實現的伸縮布局效果，其功能和舊版本的屬性大同小異。我們還是采用上一節課的文件，然后使用混合過渡代碼，實現 IE10?的伸縮布局。 首先，設置伸縮盒的 display?有如下兩個屬性值： | **屬性值** | **說明** | | --- | --- | | flexbox | 將容器盒模型作為塊級彈性伸縮盒顯示（混合版本） | | inline-flexbox | 將容器盒模型作為內聯級彈性伸縮盒顯示（混合版本） | //需要?IE 前綴-ms- ``` div { display: -ms-flexbox; } ``` **1.flex-direction** flex-direction 屬性和舊版本?box-orient 屬性一樣，都是設置伸縮項目的排列方式。 //設置從上往下排列? ``` div { -ms-flex-direction: column; } ``` | **屬性值** | **說明** | | --- | --- | | row | 設置從左到右排列 | | row-reverse | 設置從右到左排列 | | column | 設置從上到下排列 | | column-reverse | 設置從下到上排列 | **2.flex-wrap** flex-wrap 屬性類似與舊版本中的?box-lines，但是?box-lines 我們沒有講解，原因是沒有瀏覽器支持它。 //設置無法容納時，自動換行 ``` div { -ms-flex-wrap: wrap; } ``` | **屬性值** | **說明** | | --- | --- | | nowrap | 默認值，都在一行或一列顯示 | | wrap | 伸縮項目無法容納時，自動換行 | | wrap-reverse | 伸縮項目無法容納時，自動換行，方向和 wrap?相反 | **3.flex-flow** flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。 //簡寫形式 ``` div { -ms-flex-flow: row wrap; } ``` **4.flex-pack** flex-pack 屬性和舊版本中的?box-pack 一樣，設置伸縮項目的對其方式。 //按照中心點對齊? ``` div { -ms-flex-pack: center; } ``` | **屬性值** | **說明** | | --- | --- | | start | 伸縮項目以起始點靠齊 | | end | 伸縮項目以結束點靠齊 | | center | 伸縮項目以中心點靠齊 | | justify | 伸縮項目平局分布 | ?**5.flex-align** flex-align 屬性和舊版本中的?box-align 一樣，處理伸縮項目容器的額外空間。 //處理額外空間? ``` div { -ms-flex-align: center; } ``` | **屬性值** | **說明** | | --- | --- | | start | 伸縮項目以頂部為基準，清理下部額外空間 | | end | 伸縮項目以底部為基準，清理上部額外空間 | | center | 伸縮項目以中部為基準，平均清理上下部額外空間 | | baseline | 伸縮項目以基線為基準，清理額外的空間 | | stretch | 伸縮項目填充整個容器，默認 | **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; } ```