深刻理解 CSS3 彈性盒佈局模型

簡介

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。即使容器中條目的尺寸未知或是動態變化的，彈性盒佈局模型也能正常的工做。在該佈局模型中，容器會根據佈局的須要，調整其中包含的條目的尺寸和順序來最好地填充全部可用的空間。當容器的尺寸因爲屏幕大小或窗口尺寸發生變化時，其中包含的條目也會被動態地調整。好比當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒佈局是與方向無關的。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並無這樣內在的方向限制，能夠由開發人員自由操做。

基本佈局

首先從最基本的佈局開始介紹彈性盒佈局模型。要實現的佈局效果是一個簡單的圖片縮略圖預覽頁面。頁面的基本 HTML 如代碼清單 1所示。

清單 1. 簡單的圖片縮略圖預覽頁面的 HTML 代碼

1 2 3 4 5 6 7 8

< ul class = "flex-container" >     < li class = "flex-item" >< img src = "//placehold.it/300&text=1" ></ li >     < li class = "flex-item" >< img src = "//placehold.it/300&text=2" ></ li >     < li class = "flex-item" >< img src = "//placehold.it/300&text=3" ></ li >     < li class = "flex-item" >< img src = "//placehold.it/300&text=4" ></ li >     < li class = "flex-item" >< img src = "//placehold.it/300&text=5" ></ li >     < li class = "flex-item" >< img src = "//placehold.it/300&text=6" ></ li > </ ul >

該頁面的基本 HTML 是很簡單的。在一個<ul>元素下面有 6 個<li>元素。每一個<li>元素中包含一個大小爲 300x300 的縮略圖圖片。<ul>元素做爲彈性盒佈局的容器，而<li>元素則是容器中的條目。實現基本佈局的 CSS 如代碼清單 2所示。

清單 2. 簡單的圖片縮略圖預覽頁面的 CSS 代碼

1 2 3 4 5 6 7 8 9 10 11

.flex-container {    list-style: none;       display: flex;     flex-direction: row;     flex-wrap: wrap; }   .flex-item {     padding: 5px; }

在代碼清單 2 中，對於彈性盒佈局的容器，使用"display: flex"聲明使用彈性盒佈局。CSS 屬性聲明"flex-direction"用來肯定主軸的方向，從而肯定基本的條目排列方式。"flex-direction"屬性的可選值及其含義如表1所示。

表 1. 「flex-direction」屬性的可選值及其含義

屬性值	含義
row（默認值）	主軸爲水平方向。排列順序與頁面的文檔順序相同。若是文檔順序是 ltr，則排列順序是從左到右；若是文檔順序是 rtl，則排列順序是從右到左。
row-reverse	主軸爲水平方向。排列順序與頁面的文檔順序相反。
column	主軸爲垂直方向。排列順序爲從上到下。
column-reverse	主軸爲垂直方向。排列順序爲從下到上。

默認狀況下，彈性盒容器中的條目會盡可能佔滿容器在主軸方向上的一行。當容器的主軸尺寸小於其全部條目總的主軸尺寸時，會出現條目之間互相重疊或超出容器範圍的現象。CSS 屬性"flex-wrap"用來聲明當容器中條目的尺寸超過主軸尺寸時應採起的行爲。"flex-wrap"屬性的可選值及其含義如表2所示。

表 2. 「flex-wrap」屬性的可選值及其含義

屬性值	含義
nowrap（默認值）	容器中的條目只佔滿容器在主軸方向上的一行，可能出現條目互相重疊或超出容器範圍的現象。
wrap	當容器中的條目超出容器在主軸方向上的一行時，會把條目排列到下一行。下一行的位置與交叉軸的方向一致。
wrap-reverse	與 wrap 的含義相似，不一樣的是下一行的位置與交叉軸的方向相反。

可使用"flex-flow"屬性把"flex-direction"和"flex-wrap"結合起來，如代碼清單 3所示。

清單 3. 「flex-flow」屬性的使用示例

1	flex-flow: row wrap;

總結

做爲 CSS3 規範的一部分，彈性盒佈局模型能夠在不少典型的場景中簡化完成佈局所需的 CSS 代碼。該佈局模型也提供了不少實用的特性來知足常見的佈局要求，包括對容器中條目的排列、對齊、調整大小和分配空白空間等。彈性盒佈局模型能夠做爲 Web 開發人員工具箱中的一個很好的工具。