Flex彈性盒子布局
首先,設置伸縮盒的 display 有如下兩個屬性值:
flex:將容器盒模型作為塊級彈性伸縮盒顯示
inline-flex:將容器盒模型作為內聯級彈性伸縮盒顯示
代碼如下:
/*大部分不需要前綴*/ div { display: flex; }
彈性布局的八個常用屬性:
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; }
Flex彈性盒子布局