CSS彈性盒子

介紹

在響應式 Web 設計中，UI 佈局必須適配不同尺寸的裝置。
CSS3 引入了 Flexible Box，簡稱 flexbox（彈性盒子），它特別適合用來建立彈性的頁面佈局。
彈性佈局以一種可預見的方式排列元素，使其適用於不同尺寸的裝置。

使用說明

在一個元素的 CSS 中新增display: flex; 該元素會變為flex容器，預設它的子元素會從左到右逐個排列，把flex容器設為一個列，它的子元素會從上到下逐個排列。子元素排列的方向被稱為 main axis（主軸）。與主軸垂直的叫做 cross axis（交叉軸）。行的交叉軸是垂直的，列的交叉軸是水平的。

父元素屬性

下面屬性在父元素中設定，用於設定整個CSS彈性盒子的樣式。

1. flex-direction: row;屬性可以設定子元素的排列方式，預設值是row。其他可選值包括：column，row-reverse和column-reverse。
2. justify-content: flex-start 可以更改 flex 子元素在主軸排列方式。
   1. center: flex 子元素排列在 flex 容器中間。
   2. flex-start：從 flex 容器的前端開始排列專案。對行來說是把專案都靠左放，對於列是把專案都靠頂部放。
   3. flex-end：從 flex 容器的後端開始排列專案。對行來說是把專案都靠右放，對於列是把專案都靠底部放。
   4. space-between：專案間保留一定間距地在主軸排列。第一個和最後一個專案會被擠到容器邊沿。例如，在行中第一個專案會緊貼著容器左側，最後一個專案會緊貼著容器右側，然後其他專案均勻排布。
   5. space-around：與space-between相似，但頭尾兩個專案不會緊貼容器邊緣，空間會均勻分佈在所有專案兩邊。
3. align-items: stretch屬性，可以用於在交叉軸調整 flex 子元素。對於行，它規定了專案在容器中應該靠上還是靠下，而對於列，就是靠左或靠右。
   1. flex-start：從 flex 容器的前端開始排列專案。對行來說是把專案都靠頂部放，對於列是把專案都靠左放。
   2. flex-end
      ：從 flex 容器的後端開始排列專案。對行來說是把專案都靠底部放，對於列是把專案都靠右放。
   3. center：把專案的位置調整到中間。對於行，垂直居中（專案上下方空間相等）。對於列，水平居中（專案左右方空間相等）。
   4. stretch：拉伸專案，填滿 flex 容器。例如，排成行的專案從容器頂部拉伸到底部。
   5. baseline：基線對齊地排列。基線是字型相關的概念，可以認為字型坐落在基線上。
4. flex-wrap: nowrap屬性可以使專案換行。這意味著多出來的專案會被移到新的行或列。換行發生的斷點由專案和容器的大小決定。換行方向的可選值有這些：
   1. nowrap：預設值，不換行。
   2. wrap：行從上到下排，列從左到右排。
   3. wrap-reverse：行從下到上排，列從右到左排。

子元素屬性

下面屬性在子元素中設定，用於設定CSS彈性盒子中指定某個盒子的樣式。

1. flex-shrink屬性。使用之後，如果 flex 容器太小，該專案會自動縮小。當容器的寬度小於裡面所有專案的寬度，專案就會自動壓縮。接受number型別的值。數值越大，與其他專案相比會被壓縮得更厲害。例如，如果一個專案的flex-shrink為 1 ，另一個專案flex-shrink為 3，那麼 3 的那個與另一個相比會受到 3 倍壓縮。
2. flex-grow與flex-shrink相對。flex-shrink會在容器太小時對元素作出調整。相應地，flex-grow會在容器太大時對元素作出調整。如果一個專案flex-grow屬性的值為 1，另一個flex-grow為 3，那麼 3 的會比 1 的擴大三倍。
3. flex-basis屬性指定了專案在 CSS 進行flex-shrink或flex-grow調整前的初始大小。flex-basis屬性的單位與其他 size 屬性一致（px、em、%等）。如果值為auto，專案的大小依賴於自身內容
4. 上面幾個 flex 屬性有一個簡寫方式。flex-grow、flex-shrink和flex-basis屬性可以在flex中一同設定。例如，flex: 1 0 10px;會把專案屬性設為flex-grow: 1; flex-shrink: 0; flex-basis: 10px;。屬性的預設設定是flex: 0 1 auto;。
5. order屬性告訴 CSS flex 容器裡專案的順序。預設情況下，專案排列順序與源 HTML 檔案中順序相同。這個屬性接受數字作為引數，可以使用負數。
6. align-self屬性允許你調整每個元素自己的對齊方式，而不是一次性設定全部專案。因為float、clear和vertical-align等調整使用的屬性都不能應用在 flex 子元素，所以這個屬性顯得十分有用。align-self的允許值與align-items一樣，並且它會覆蓋align-items的值。

搬運連結