本文介紹的是 CSS3 規範中引入的新布局模型：彈性盒模型（flex box）。隨著響應式用戶界面的流行，Web 應用一般都要求適配不同的設備尺寸和瀏覽器分辨率。

瀏覽器支持：

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

主軸並不固定為水平方向的 X 軸，交叉軸也不固定為垂直方向的 Y 軸。在使用時，通過 CSS 屬性聲明首先定義主軸的方向（水平或垂直），則交叉軸的方向也相應確定下來。容器中的條目可以排列成單行或多行。

在容器進行布局時，在每一行中會把其中的條目從主軸起始位置開始，依次排列到主軸結束位置；而當容器中存在多行時，會把每一行從交叉軸起始位置 開始，依次排列到交叉軸結束位置。

與主軸和交叉軸尺寸對應的是主軸尺寸屬性和交叉軸尺寸屬性，指的是 CSS 中的屬性 width 或 height。

在本文的所有代碼示例中，容器的 CSS 類名統一為 flex-container，而條目的 CSS 類名則為 flex-item。

1. 彈性盒子常用屬性(對於彈性盒布局的容器，使用"display: flex"聲明使用彈性盒布局。)

(1). flex-direction(主軸方向，確定基本的條目(彈性項)排列方式)屬性：

row(默認)：主軸為水平方向。排列順序與頁面的文檔順序相同。如果文檔順序是 ltr，則排列順序是從左到右；如果文檔順序是 rtl，則排列順序是從右到左。

row-reverse：主軸為水平方向。排列順序與頁面的文檔順序相反。

column：主軸為垂直方向。排列順序為從上到下。

column-reverse：主軸為垂直方向。排列順序為從下到上。

(2). "flex-wrap"用來聲明當容器中條目的換行方式。

nowrap（默認值）: 容器中的條目只占滿容器在主軸方向上的一行，可能出現條目互相重疊或超出容器範圍的現象。

wrap: 當容器中的條目超出容器在主軸方向上的一行時，會把條目排列到下一行。下一行的位置與交叉軸的方向一致。

wrap-reverse: 與 wrap 的含義類似，不同的是下一行的位置與交叉軸的方向相反。

(3). "flex-flow"屬性把"flex-direction"和"flex-wrap"結合起來了。flex-flow: row wrap;

(4). justify-content屬性(內容對齊)

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。

flex-start：

彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。

flex-end：

彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。

center：

彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。

space-between：

彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩余的彈性項分布在該行上，相鄰項目的間隔相等。

space-around：

彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同於center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

(5). align-items屬性

設置或檢索彈性盒子元素在交叉軸方向上的對齊方式。

(6). align-content屬性，align-items是針對彈性盒子內只有一條主軸是，子元素在交叉軸上的分布，align-content是在盒模型有多條主軸時，元素在交叉軸上的分布，其分布方式對於每一個子元素適用。

stretch - 默認。各行將會伸展以占用剩余的空間。

flex-start - 各行向彈性盒容器的起始位置堆疊。

flex-end - 各行向彈性盒容器的結束位置堆疊。

center -各行向彈性盒容器的中間位置堆疊。

space-between -各行在彈性盒容器中平均分布。

space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。

2. 彈性子元素屬性

(3). flex-shrink

.flex-container .flex-item { flex-shrink: <integer>; }

<integer>：一個數字，規定項目將相對於其他靈活的項目進行收縮的量。默認值是 1。

(4). flex-basis

.flex-container .flex-item { flex-basis: <integer> | auto; }

<integer>：一個長度單位或者一個百分比，規定元素的初始長度。
auto：默認值。長度等於元素的長度。如果該項目未指定長度，則長度將根據內容決定。

(5). flex

flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

CSS彈性盒模型(flex box)