學習要點: 1.混合過度版 主講教師:李炎恢 本章主要探討 HTML5 中 CSS3 提供的用來實現未來響應式彈性伸縮佈局方案,這裡做一個初步的瞭解。 一.混合過渡版 混合版本的 Flexbox 模型是 2011 年提出的工作草案,主要是針對 IE10 瀏覽器實現的伸縮佈局效果,其功能和舊版本的屬性 ...
學習要點:
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; }