深入理解 CSS3 彈性盒布局模型

web 應用的樣式設計中，布局是非常重要的一部分。布局用來確定頁面上不同元件和元素的尺寸和位置。隨著響應式使用者介面的流行，web 應用一般都要求適配不同的裝置尺寸和瀏覽器解析度。響應式使用者介面設計中最重要的一環就是布局。需要根據視窗尺寸來調整布局，從而改變元件的尺寸和位置，以達到最佳的顯示效果。這也使得布局的邏輯變得更加複雜。本文介紹的是 css3 規範中引入的新布局模型：彈性盒模型（flex box）。彈性盒模型可以用簡單的方式滿足很多常見的複雜的布局需求。它的優勢在於開發人員只是宣告布局應該具有的行為，而不需要給出具體的實現方式。瀏覽器會負責完成實際的布局。該布局模型在主流瀏覽器中都得到了支援。

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

在深入到彈性盒布局模型的細節之前，首先了解幾個相關的重要概念，具體如圖 1所示。

圖 1. 彈性盒布局模型相關的概念

彈性盒布局的容器（flex container）指的是採用了彈性盒布局的 dom 元素，而彈性盒布局的條目（flex item）指的是容器中包含的子 dom 元素。圖中的最外圍的邊框表示的是容器，而編號 1 和 2 的邊框表示的是容器中的條目。

從圖中可以看到，彈性盒布局中有兩個互相垂直的座標軸：乙個稱之為主軸（main axis），另外乙個稱之為交叉軸（cross axis）。主軸並不固定為水平方向的 x 軸，交叉軸也不固定為垂直方向的 y 軸。在使用時，通過 css 屬性宣告首先定義主軸的方向（水平或垂直），則交叉軸的方向也相應確定下來。容器中的條目可以排列成單行或多行。主軸確定了容器中每一行上條目的排列方向，而交叉軸則確定行本身的排列方向。可以根據不同的頁面設計要求來確定合適的主軸方向。有些容器中的條目要求從左到右水平排列，則主軸應該是水平方向的；而另外一些容器中的條目要求從上到下垂直排列，則主軸應該是垂直方向的。

確定主軸和交叉軸的方向之後，還需要確定它們各自的排列方向。對於水平方向上的軸，可以從左到右或從右到左來排列；對於垂直方向上的軸，則可以從上到下或從下到上來排列。對於主軸來說，排列條目的起始和結束位置分別稱為主軸起始（main start）和主軸結束（main end）；對於交叉軸來說，排列行的起始和結束位置分別稱為交叉軸起始（cross start）和交叉軸結束（cross end）。在容器進行布局時，在每一行中會把其中的條目從主軸起始位置開始，依次排列到主軸結束位置；而當容器中存在多行時，會把每一行從交叉軸起始位置開始，依次排列到交叉軸結束位置。

彈性盒布局中的條目有兩個尺寸：主軸尺寸和交叉軸尺寸，分別對應其 dom 元素在主軸和交叉軸上的大小。如果主軸是水平方向，則主軸尺寸和交叉軸尺寸分別對應於 dom 元素的寬度和高度；如果主軸是垂直方向，則兩個尺寸要反過來。與主軸和交叉軸尺寸對應的是主軸尺寸屬性和交叉軸尺寸屬性，指的是 css 中的屬性 width 或 height。比如，當主軸是水平方向時，主軸尺寸屬性是 width，而 width 的值是主軸尺寸的大小。

彈性盒布局模型中的 css 樣式宣告分別適用於容器或條目。在下面的內容中會詳細的介紹相關的 css 屬性。首先介紹如何使用彈性盒布局模型進行基本的頁面布局。在本文的所有**示例中，容器的 css 類名統一為 flex-container，而條目的 css 類名則為 flex-item。所有的示例都可以在codepen上進行預覽。

首先從最基本的布局開始介紹彈性盒布局模型。要實現的布局效果是乙個簡單的縮圖預覽頁面。頁面的基本 html 如**

清單 1所示。

清單 1. 簡單的縮圖預覽頁面的 html **

該頁面的基本 html 是很簡單的。在乙個

清單 10. 部落格頁面的 css **

.post

.post-meta

.post-body

.post-comments

.comments-count

.post-image

該示例中主要使用了"order"屬性來改變條目的顯示位置，以及使用"align-self"來使得居中顯示。

清單 9和清單 10中給出了示例的 html 和 css **。預覽頁面見這裡。

清單 9. 部落格頁面的 html **

清單 10. 部落格頁面的 css **

.post

.post-meta

.post-body

.post-comments

.comments-count

.post-image

該示例中主要使用了"order"屬性來改變條目的顯示位置，以及使用"align-self"來使得居中顯示。

作為 css3 規範的一部分，彈性盒布局模型可以在很多典型的場景中簡化完成布局所需的 css **。該布局模型也提供了很多實用的特性來滿足常見的布局要求，包括對容器中條目的排列、對齊、調整大小和分配空白空間等。彈性盒布局模型可以作為 web 開發人員工具箱中的乙個很好的工具。

深入理解 CSS3 彈性盒布局模型

深入理解 CSS3 彈性盒布局模型

深入理解 CSS3 彈性盒布局模型

CSS3彈性盒布局

相關推薦