css的彈性盒子

標籤：

彈性盒布局模型（Flexible Box Layout）是 CSS3 規範中提出的一種新的布局方式。該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。這種布局方式在條目尺寸未知或動態時也能工作。

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

彈性盒布局的容器（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的彈性盒子