學習要點：
1.新版本
主講教師：李炎恢
本章主要** html5 中 css3 提供的用來實現未來響應式彈性伸縮布局方案，這裡做乙個初步的了解。
一．新版本
新版本的 flexbox 模型是 2012 年 9 月提出的工作草案，這個草案是由 w3c 推出的最新語法。這個版本立志於指定標準，讓新式的瀏覽器全面相容，在未來瀏覽器的更新換代中實現了統一。
首先，設定伸縮盒的 display 有如下兩個屬性值：
屬性值
說明
flex
將容器盒模型作為塊級彈性伸縮盒顯示（新版本）
inline-flex
將容器盒模型作為內聯級彈性伸縮盒顯示（新版本）
//大部分不需要字首
div
屬性
ie
firefox
chrome
opera
safari
帶字首無
無21 ~ 28
無7.0
不帶字首
11+20+
29+12.1
無從這張表可以看出，只有 webkit 引擎的瀏覽器 chrome 和 safari 的版本需要新增-webkit-，而 chrome 瀏覽器 29 版本以後可以省略了。
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.justify-content
justify-content 屬性和舊版本中的 box-pack 一樣，設定伸縮專案的對其方式。
//按照中心點對齊
div
屬性值
說明
flex-start
伸縮專案以起始點靠齊
flex-end
伸縮專案以結束點靠齊
center
伸縮專案以中心點靠齊
space-between
伸縮專案平局分布
space-around
同上，但兩端保留一半的空間
5.align-items
align-items 屬性和舊版本中的 box-align 一樣，處理伸縮專案容器的額外空間。
//處理額外空間
div
屬性值
說明
flex-start
伸縮專案以頂部為基準，清理下部額外空間
flex-end
伸縮專案以底部為基準，清理上部額外空間
center
伸縮專案以中部為基準，平均清理上下部額外空間
baseline
伸縮專案以基線為基準，清理額外的空間
stretch
伸縮專案填充整個容器，預設
6.align-self
align-self 和 align-items 一樣，都是清理額外空間，但它是單獨設定某乙個伸縮專案的。所有的值和 align-itmes 一致。
//單獨設定清理額外空間
p:nth-child(2)
7.flex
flex 屬性和舊版本中的 box-flex 類似，用來控制伸縮容器的比例分配。
//設定比例分配
p:nth-child(1) p:nth-child(2) p:nth-child(3)
8.order
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 模型是 2011 年提出的工作草案，主要是針對 ie10 瀏覽器實現的伸縮布局效果，其功能和舊版本的屬性大同小異...