前一篇提到的 CSS 排版方式，這裡針對現下個瀏覽器支援度越來越好的 Flex 或者會有人說是 Flexbox，兩者是密切相關的概念，但他們的用途和含義有所不同：

簡述

Flexbox

全名: Flexbox（Flexible Box Layout）是一種 CSS 排版模型，用於設計和佈局。
功能: 它允許容器內的項目自動調整大小，以填滿可用空間，並在不同方向上對齊（水平或垂直）。
屬性: Flexbox 提供了一組屬性來控制容器和項目的排列和對齊方式，包括 display: flex、flex-direction、justify-content、align-items 等。

Flex

定義: 在 Flexbox 中，flex 是一組 CSS 屬性中的一個（或多個）屬性，主要用來定義項目的增長、縮小和基礎大小。
屬性: flex 屬性是 flex-grow、flex-shrink 和 flex-basis 的縮寫。它控制單個項目在容器中的彈性行為。

例如：
flex: 1 會使項目在可用空間中增長和縮小。
flex: 0 1 100px 表示項目不增長（flex-grow: 0），可以縮小（flex-shrink: 1），並且基礎大小為 100 像素（flex-basis: 100px）。

Flex 各屬性介紹

容器屬性（Flex Container）

這些屬性是用於設置整個彈性容器的行為和佈局。

display：設置為 flex 或 inline-flex，將元素設置為彈性容器。
- flex: 容器會在新行中顯示，當在 display 屬性宣告 flex，如果沒有設定寬高，彈性容器像 block 一樣佔據了整行。
- inline-flex: 容器會在行內顯示，當在 display 屬性宣告 inline-flex，如果沒有設定寬高，可以看到彈性容器像 inline-block 一樣被子層彈性項目的尺寸撐開。
  
  Flex
  
  1
  
  2
  
  inline-flex
  
  1
  
  2
flex-direction：定義主軸的方向（項目排列的方向）。

flex-direction:row;（項目沿主軸從左到右排列『默認值』）

1

2

3

flex-direction:row-reverse;（項目沿主軸從右到左排列）

1

2

3

flex-direction:column;（項目沿主軸從上到下排列）

1

2

3

flex-direction:column-reverse;（項目沿主軸從下到上排列）

1

2

3
flex-wrap：控制項目是否換行。

flex-wrap:nowrap;（所有項目在一行中，可能會縮小以適應容器『默認值』）

1

2

3

4

5

6

7

flex-wrap:wrap;（項目超出容器時換行）

1

2

3

4

5

6

7

flex-wrap:wrap;（項目超出容器時換行，但從底部開始）

1

2

3

4

5

6

7
flex-flow:
- flex-direction 和 flex-wrap 的縮寫形式，例如 row wrap。
justify-content：控制主軸上的項目對齊方式。

justify-content:start; （項目靠左對齊）

1

2

3

justify-content:end;（項目靠右對齊）

1

2

3

justify-content:center;（項目居中對齊）

1

2

3

justify-content:space-between;
（項目之間均勻分配空間，第一個項目在起始位置，最後一個在結束位置）

1

2

3

justify-content:space-around;（項目之間有均勻的間距，項目的兩側也有間距。）

1

2

3

justify-content:space-evenly;（項目之間和邊緣的間距均等）

1

2

3
align-items：控制交叉軸上的項目對齊方式。

align-items:start; （項目靠上對齊）

1

2

3

align-items:end;（項目靠下對齊）

1

2

3

align-items:center;（項目在交叉軸上居中對齊）

1

2

3

align-items:baseline;
（項目根據基線對齊）

1

2

3

align-items:stretch;（項目填滿容器的高度『默認值』）

1

2

3
align-content：控制多行項目在交叉軸上的對齊方式。

align-content:start; （項目靠上對齊）

1

2

3

4

5

align-content:end;（項目靠下對齊）

1

2

3

4

5

align-content:center;（項目在交叉軸上居中對齊）

1

2

3

4

5

align-content:space-between;
（行之間均勻分配空間）

1

2

3

4

5

align-content:space-around;（行之間有均勻的間距）

1

2

3

4

5

align-content:stretch;（行填滿容器的高度『默認值』）

1

2

3

4

5

項目屬性（Flex Item）

這些屬性是用於設置彈性容器內部各個項目的行為和佈局。

flex-grow:
- 定義項目如何在可用空間中增長。默認值為 0，表示不增長。如果設為 1，項目會根據容器的剩餘空間增長。
flex-shrink:
- 定義項目如何縮小。默認值為 1，表示項目會根據容器的大小縮小。如果設為 0，項目不會縮小。
flex-basis:
- 設定項目的初始大小，默認為 auto，表示根據項目的內容決定大小。可以設定具體的像素值或百分比。
flex:
- 縮寫形式，結合 flex-grow、flex-shrink 和 flex-basis。例如，flex: 1 表示項目將增長以填充可用空間。
  
  範例１：
  父元素寬度『足夠』的情況
  480px
  
  1
  
  flex-grow: 1;
  
  flex-shrink: 1;
  
  flex-basis: 160px;
  
  2
  
  flex-grow: 2;
  
  flex-shrink: 2;
  
  flex-basis: 160px;
  父元素寬度『不足』的情況
  220px
  
  1
  
  flex-grow: 1;
  
  flex-shrink: 1;
  
  flex-basis: 160px;
  
  2
  
  flex-grow: 2;
  
  flex-shrink: 2;
  
  flex-basis: 160px;
  範例 1 說明：
  紅色區塊在父元素寬度『足夠』的情況下，『伸展』的比例只有 1，而藍色則分配到 2，所以藍色總長度會比紅色多；
  紅色區塊在父元素寬度『不足』的形況下，『壓縮』的比例只有 1，而藍色則分配到 2，所以藍色的總長度會比紅色少。
範例2：
父元素寬度『足夠』的情況
480px
1

flex-grow: 2;

flex-basis: 160px;
2

flex-grow: 1;

flex-shrink: 0;

flex-basis: 160px;
父元素寬度『不足』的情況
220px
1

flex-grow: 2;

flex-basis: 160px;
2

flex-grow: 1;

flex-shrink: 0;

flex-basis: 160px;
範例 2 說明：
藍色區塊在父元素寬度『足夠』的情況下，「伸展」的比例只有 1，而紅色則分配到 2，所以藍色總長度會比紅色多；
藍色區塊在父元素寬度『不足』的形況下，『壓縮』的比例是 0，所以藍色不會被壓縮，而紅色沒有設定數值，所以『壓縮』的比例是預設的 1。
align-self: 針對單個項目的自定義對齊方式，可以覆蓋容器的 align-items 設置。align-self 可以個別調整子元素在交錯軸線的位置，屬性與 align-items 相同。假如我們已經在父元素上設定 align-items，但要其中一個內容物的位置需要調整成其他對齊方式，這時我們就可以針對該元素設定 align-self 來覆寫原本 align-items 的屬性。
- auto：繼承父元素的 align-items 值（預設）。
- flex-start：元素對齊到容器的起始邊。
- flex-end：元素對齊到容器的結束邊。
- center：元素在容器內垂直居中。
- baseline：元素的基線對齊。
- stretch：若允許，元素會拉伸以填滿容器。

簡述

Flexbox

Flex

Flex 各屬性介紹

容器屬性（Flex Container）

項目屬性（Flex Item）

範例１：

範例2：