## **display:flexbox|inline-flexbox** 首先，設置伸縮盒的 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; } ~~~