彈性盒布局模型（flexible box layout）是 css3 規範中提出的一種新的布局方式。該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。這種布局方式在條目尺寸未知或動態時也能工作。這種布局方式已經被主流瀏覽器所支援，可以在 web 應用開發中使用。本文詳細的介紹該布局模型以及如何在具體開發中應用該布局模型來簡化常見的頁面布局場景。
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該示例中主要使用了"order"屬性來改變條目的顯示位置，以及使用"align-self"來使得居中顯示。.post-meta
.post-body
.post-comments
.comments-count
.post-image
由於彈性盒模型規範本身有過多個不同的版本，因此瀏覽器對於該規範的支援也存在一些不一致。瀏覽器一共支援 3 個不同版本規範的語法：
瀏覽器的支援情況如下表
6所示。
表 6. 彈性盒布局模型的瀏覽器支援
chrome
safari
firefox
opera
ieandroid
ios21+（新規範）
20-（老規範）
6.1+（新規範）
3.1+（老規範）
22+（新規範）
2-21（老規範）
12.1+（新規範）
11+（新規範）
10（中間版本）
4.4+（新規範）
2.1+（老規範）
7.1+（新規範）
3.2+（老規範）
從表6中可以看到，彈性盒布局模型已經被主流的瀏覽器所支援。不過為了支援不同版本的瀏覽器，在使用時除了規範中定義的屬性之外，還需要新增相應的瀏覽器字首形式，如**
清單 11所示。
清單 11. 彈性盒布局模型的瀏覽器字首形式
.flex-container對於這些瀏覽器相關的字首，最好使用 autoprefixer 這樣的工具來進行處理。.flex-item
.flex-item
作為 css3 規範的一部分，彈性盒布局模型可以在很多典型的場景中簡化完成布局所需的 css **。該布局模型也提供了很多實用的特性來滿足常見的布局要求，包括對容器中條目的排列、對齊、調整大小和分配空白空間等。彈性盒布局模型可以作為 web 開發人員工具箱中的乙個很好的工具。
深入理解 CSS3 彈性盒布局模型
web 應用的樣式設計中，布局是非常重要的一部分。布局用來確定頁面上不同元件和元素的尺寸和位置。隨著響應式使用者介面的流行，web 應用一般都要求適配不同的裝置尺寸和瀏覽器解析度。響應式使用者介面設計中最重要的一環就是布局。需要根據視窗尺寸來調整布局，從而改變元件的尺寸和位置，以達到最佳的顯示效果。...
深入理解 CSS3 彈性盒布局模型
web 應用的樣式設計中，布局是非常重要的一部分。布局用來確定頁面上不同元件和元素的尺寸和位置。隨著響應式使用者介面的流行，web 應用一般都要求適配不同的裝置尺寸和瀏覽器解析度。響應式使用者介面設計中最重要的一環就是布局。需要根據視窗尺寸來調整布局，從而改變元件的尺寸和位置，以達到最佳的顯示效果。...
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...