學習要點: 1.新版本 主講教師:李炎恢 本章主要探討 HTML5 中 CSS3 提供的用來實現未來響應式彈性伸縮佈局方案,這裡做一個初步的瞭解。 一.新版本 新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,這個草案是由 W3C 推出的最新語法。這個版本立志於指定標準,讓新式的 ...
學習要點:
1.新版本
主講教師:李炎恢
本章主要探討 HTML5 中 CSS3 提供的用來實現未來響應式彈性伸縮佈局方案,這裡做一個初步的瞭解。
一.新版本
新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,這個草案是由 W3C 推出的最新語法。這個版本立志於指定標準,讓新式的瀏覽器全面相容,在未來瀏覽器的更新換代中實現了統一。
首先,設置伸縮盒的 display 有如下兩個屬性值:
屬性值 |
說明 |
flex |
將容器盒模型作為塊級彈性伸縮盒顯示(新版本) |
inline-flex |
將容器盒模型作為內聯級彈性伸縮盒顯示(新版本) |
//大部分不需要首碼
div { display: flex; }
屬性 |
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 { 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 { flex-flow: row wrap; }
4.justify-content
justify-content 屬性和舊版本中的 box-pack 一樣,設置伸縮項目的對其方式。
//按照中心點對齊
div { justify-content: space-around; }
屬性值 |
說明 |
flex-start |
伸縮項目以起始點靠齊 |
flex-end |
伸縮項目以結束點靠齊 |
center |
伸縮項目以中心點靠齊 |
space-between |
伸縮項目平局分佈 |
space-around |
同上,但兩端保留一半的空間 |
5.align-items
align-items 屬性和舊版本中的 box-align 一樣,處理伸縮項目容器的額外空間。
//處理額外空間
div { align-itmes: center; }
屬性值 |
說明 |
flex-start |
伸縮項目以頂部為基準,清理下部額外空間 |
flex-end |
伸縮項目以底部為基準,清理上部額外空間 |
center |
伸縮項目以中部為基準,平均清理上下部額外空間 |
baseline |
伸縮項目以基線為基準,清理額外的空間 |
stretch |
伸縮項目填充整個容器,預設 |
6.align-self
align-self 和 align-items 一樣,都是清理額外空間,但它是單獨設置某一個伸縮項目的。所有的值和 align-itmes 一致。
//單獨設置清理額外空間
p:nth-child(2) { align-self: center; }
7.flex
flex 屬性和舊版本中的 box-flex 類似,用來控制伸縮容器的比例分配。
//設置比例分配
p:nth-child(1) { flex: 1; } p:nth-child(2) { flex: 3; } p:nth-child(3) { flex: 1; }
8.order
order 屬性和 box-ordinal-group 屬性一樣控制伸縮項目出現的順序。
//設置伸縮項目順序
p:nth-child(1) { order: 2; } p:nth-child(2) { order: 3; } p:nth-child(3) { order: 1; }