什麼是 Flexbox？
Flexbox（彈性盒模型，Flexible Box Layout）是 CSS 提供的一種佈局方式，專為一維佈局設計（一次處理一行或一列）。它讓你輕鬆控制元素的排列、對齊、間距，甚至能自動適應不同螢幕大小。相比傳統的 float 或 position，Flexbox 更直觀且強大，非常適合用來打造響應式設計。
Flexbox 的核心概念是容器（Container）和項目（Items）：
-
容器：設定 display: flex 的父元素，負責定義 Flexbox 的行為。
-
項目：容器內的子元素，會受到容器的 Flex 屬性影響。
Flexbox 的基本屬性
以下是 Flexbox 的核心屬性，分為容器屬性和項目屬性，我會逐一說明，並在後面提供 React 範例。
1. 容器屬性（設定在父元素上）
這些屬性控制整個 Flex 容器的行為：
-
display: flex
-
啟用 Flexbox 佈局。
-
範例：display: flex; 或 display: inline-flex;（後者讓容器保持行內元素特性）。
-
-
flex-direction
-
定義項目排列的方向（主軸方向）。
-
選項：
-
row（預設）：從左到右排列。
-
row-reverse：從右到左排列。
-
column：從上到下排列。
-
column-reverse：從下到上排列。
-
-
-
flex-wrap
-
控制項目是否換行。
-
選項：
-
nowrap（預設）：所有項目擠在同一行/列。
-
wrap：項目會自動換行。
-
wrap-reverse：換行但順序反轉。
-
-
-
justify-content
-
控制項目在主軸上的對齊方式。
-
選項：
-
flex-start（預設）：靠主軸起點對齊。
-
flex-end：靠主軸終點對齊。
-
center：置中對齊。
-
space-between：項目間均分空間，首尾貼邊。
-
space-around：項目周圍均分空間。
-
space-evenly：所有間距均等。
-
-
-
align-items
-
控制項目在交叉軸上的對齊方式。
-
選項：
-
stretch（預設）：項目拉伸填滿交叉軸。
-
flex-start：靠交叉軸起點對齊。
-
flex-end：靠交叉軸終點對齊。
-
center：置中對齊。
-
baseline：按文字基線對齊。
-
-
-
align-content
-
當有多行項目時（flex-wrap: wrap），控制多行在交叉軸上的分佈。
-
選項類似 justify-content，如 flex-start、center、space-between 等。
-
2. 項目屬性（設定在子元素上）
這些屬性控制個別 Flex 項目的行為：
-
flex-grow
-
定義項目是否可以放大來填滿剩餘空間。
-
預設值：0（不放大）。
-
範例：設為 1，項目會均分剩餘空間。
-
-
flex-shrink
-
定義項目是否可以縮小以避免溢出。
-
預設值：1（允許縮小）。
-
範例：設為 0，項目不會縮小。
-
-
flex-basis
-
定義項目的基礎大小（在主軸上的初始寬度或高度）。
-
範例：flex-basis: 100px; 或 flex-basis: auto;。
-
-
flex
-
簡寫屬性，結合 flex-grow、flex-shrink、flex-basis。
-
範例：flex: 1 1 0;（等同於 flex-grow: 1; flex-shrink: 1; flex-basis: 0;）。
-
-
align-self
-
覆蓋容器的 align-items，單獨控制某個項目在交叉軸上的對齊。
-
選項同 align-items，如 flex-start、center 等。
-
-
order
-
控制項目的排列順序。
-
預設值：0。
-
範例：order: 1; 讓項目排在後面。
-
常見的 Flexbox 使用場景
-
導航列：
-
使用 flex-direction: row 和 justify-content: space-between 打造水平導航列。
-
範例：網站頂部的選單按鈕均分排列。
-
-
卡片佈局：
- 如上面的範例，適合展示產品卡片、文章列表等。
-
垂直居中：
- 使用 align-items: center 和 justify-content: center，輕鬆讓內容在容器中垂直水平居中。
-
響應式設計：
- 搭配 flex-wrap: wrap 和媒體查詢（@media），適應不同螢幕尺寸。
常見問題與解答
-
Flexbox 和 Grid 差在哪？
-
Flexbox 適合一維佈局（行或列），Grid 適合二維佈局（同時控制行和列）。
-
範例：用 Flexbox 做導航列，用 Grid 做複雜的網格佈局。
-
-
為什麼項目沒對齊？
-
檢查是否正確設定 justify-content（主軸）或 align-items（交叉軸）。
-
確保容器有足夠的高度或寬度（例如用 min-height）。
-
-
如何讓某個項目獨立對齊？
- 使用 align-self 屬性，例如 align-self: flex-end;。