學習要點：
1.混合過度版
主講教師：李炎恢
本章主要** html5 中 css3 提供的用來實現未來響應式彈性伸縮布局方案，這裡做乙個初步的了解。
一．混合過渡版
混合版本的 flexbox 模型是 2011 年提出的工作草案，主要是針對 ie10 瀏覽器實現的伸縮布局效果，其功能和舊版本的屬性大同小異。我們還是採用上一節課的檔案，然後使用混合過渡**，實現 ie10 的伸縮布局。
首先，設定伸縮盒的 display 有如下兩個屬性值：
屬性值
說明
flexbox
將容器盒模型作為塊級彈性伸縮盒顯示（混合版本）
inline-flexbox
將容器盒模型作為內聯級彈性伸縮盒顯示（混合版本）
//需要 ie 字首-ms-
div
1.flex-direction
flex-direction 屬性和舊版本 box-orient 屬性一樣，都是設定伸縮專案的排列方式。
//設定從上往下排列
div
屬性值
說明
row設定從左到右排列
row-reverse
設定從右到左排列
column
設定從上到下排列
column-reverse
設定從下到上排列
2.flex-wrap
flex-wrap 屬性類似與舊版本中的 box-lines，但是 box-lines 我們沒有講解，原因是沒有瀏覽器支援它。
//設定無法容納時，自動換行
div
屬性值
說明
nowrap
預設值，都在一行或一列顯示
wrap
伸縮專案無法容納時，自動換行
wrap-reverse
伸縮專案無法容納時，自動換行，方向和 wrap 相反
3.flex-flow
flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。
//簡寫形式
div
4.flex-pack
flex-pack 屬性和舊版本中的 box-pack 一樣，設定伸縮專案的對其方式。
//按照中心點對齊
div
屬性值
說明
start
伸縮專案以起始點靠齊
end伸縮專案以結束點靠齊
center
伸縮專案以中心點靠齊
justify
伸縮專案平局分布
5.flex-align
flex-align 屬性和舊版本中的 box-align 一樣，處理伸縮專案容器的額外空間。
//處理額外空間
div
屬性值
說明
start
伸縮專案以頂部為基準，清理下部額外空間
end伸縮專案以底部為基準，清理上部額外空間
center
伸縮專案以中部為基準，平均清理上下部額外空間
baseline
伸縮專案以基線為基準，清理額外的空間
stretch
伸縮專案填充整個容器，預設
6.flex
flex 屬性和舊版本中的 box-flex 類似，用來控制伸縮容器的比例分配。
//設定比例分配
p:nth-child(1) p:nth-child(2) p:nth-child(3)
7.flex-order
flex-order 屬性和 box-ordinal-group 屬性一樣控制伸縮專案出現的順序。
//設定伸縮專案順序
p:nth-child(1) p:nth-child(2) p:nth-child(3)
第29章 CSS3彈性伸縮布局 上
index.html 從技術上來說，ip internet procotol，網際網路協議 是一種位址協議，是網際網路資訊傳輸的規範和標準，也是網際網路賴以存在的基礎。現在的網際網路大多是建立在ipv4這個版本的位址協議基礎上，這個協議所 產生 的ip位址約有45億個，由國際組織統一分配。簡單來說，...
第29章 CSS3彈性伸縮布局 下
index.html 從技術上來說，ip internet procotol，網際網路協議 是一種位址協議，是網際網路資訊傳輸的規範和標準，也是網際網路賴以存在的基礎。現在的網際網路大多是建立在ipv4這個版本的位址協議基礎上，這個協議所 產生 的ip位址約有45億個，由國際組織統一分配。簡單來說，...
第 29 章 CSS3 彈性伸縮布局 下
學習要點 1.新版本 主講教師 李炎恢 本章主要 html5 中 css3 提供的用來實現未來響應式彈性伸縮布局方案，這裡做乙個初步的了解。一 新版本 新版本的 flexbox 模型是 2012 年 9 月提出的工作草案，這個草案是由 w3c 推出的最新語法。這個版本立志於指定標準，讓新式的瀏覽器全...