FlexBox

🎯 學習目標

• 了解 Flexbox 的基本概念
• 學會控制 主軸 (Main Axis) 和 交叉軸 (Cross Axis) 排列
• 熟悉 對齊、換行、子元素大小 的控制
• 實作練習

🔹 Flexbox 是什麼？

Flexbox（彈性盒子布局） 是 CSS 提供的一種 一維 排版技術，專門用來讓 子元素 在 水平方向或垂直方向 上 彈性排列。

📌 適用場景

• 讓 多個元素水平或垂直對齊
• 讓子元素 自動調整大小，適應不同裝置
• 讓子元素 均分空間 或 置中對齊

🔹 Flexbox 基本概念

當一個元素設置 display: flex;，它的 子元素 會沿著 主軸排列。

📌 Flexbox 結構

• 主軸（Main Axis）：決定 元素排列方向
• 交叉軸（Cross Axis）：與主軸 垂直的方向
• flex-start & flex-end：決定內容從哪裡開始與結束

📌 範例（預設是 水平排列）：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex; /* 設定為 Flex 容器 */
  background: lightgray;
  padding: 10px;
}
.item {
  width: 100px;
  height: 50px;
  background: steelblue;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 5px;
}

📌 預設行為：子元素 從左到右排列，並且會自動適應大小。 結果：

🔹 基本屬性

🎨 flex-direction：改變主軸方向

用來 決定主軸的方向，影響 子元素的排列方式：

• row（預設）：水平方向（從左到右）
• row-reverse：水平方向反向（從右到左）
• column：垂直方向（從上到下）
• column-reverse：垂直方向反向（從下到上）

.container {
  display: flex;
  flex-direction: column; /* 讓元素垂直排列 */
}

🎨 justify-content：控制主軸對齊

justify-content 用來 控制子元素在主軸的對齊方式：

• flex-start（預設）：靠 左對齊
• center：置中對齊
• flex-end：靠 右對齊
• space-between：左右貼齊，子元素間距均分
• space-around：每個元素兩側都有間距
• space-evenly：元素之間 & 兩側間距相等

.container {
  display: flex;
  justify-content: space-between;
}

🎨 align-items：控制交叉軸對齊

用來 控制子元素在交叉軸的對齊方式：

• flex-start（預設）：靠 上對齊
• center：垂直置中
• flex-end：靠 下對齊
• stretch（預設）：子元素自動填滿高度
• baseline：讓文字基線對齊

.container {
  display: flex;
  align-items: center; /* 讓子元素垂直置中 */
}

🎨 flex-wrap：換行設定

當 子元素太多時，預設會擠在同一行，可以用 flex-wrap 讓元素 換行排列：

• nowrap（預設）：不換行
• wrap：需要時換行
• wrap-reverse：換行後順序顛倒

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 設定項目之間的間距 */
}

🎨 控制子元素大小

📌 flex-grow：讓子元素填滿可用空間

• 0（預設）：不填滿
• 1：填滿所有可用空間
• 2：比 1 佔兩倍空間

.item {
  flex-grow: 1; /* 讓所有元素均分寬度 */
}

📌 flex-shrink：當空間不足時縮小

• 1（預設）：元素會縮小
• 0：不會縮小

.item {
  flex-shrink: 0; /* 不允許縮小 */
}

📌 flex-basis：設定元素初始寬度

• auto（預設）：依內容決定大小
• 200px：設定初始寬度為 200px

.item {
  flex-basis: 200px;
}

🎨 flex: 1 是什麼？

flex: 1; 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的簡寫。

📌 這代表什麼？

1. flex-grow: 1 → 子元素會均分可用空間
2. flex-shrink: 1 → 如果容器變小，元素會等比例縮小
3. flex-basis: 0 → 初始大小為 0，完全依賴 flex-grow 來決定寬度

📌 範例：讓所有 .item 均分寬度

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;
}
.item {
  flex: 1; /* 讓所有 item 均分容器寬度 */
  background: steelblue;
  color: white;
  text-align: center;
  padding: 20px;
  margin: 5px;
}

🔹 flex: 1 代表所有 .item 平均分配空間，不論容器多大，這些區塊都會等寬**。

🎨 flex: 1 2 300px 是什麼？

flex: 1 2 300px; 是 flex-grow: 1; flex-shrink: 2; flex-basis: 300px; 的簡寫。

📌 這代表什麼？

1. flex-grow: 1; → 如果有多餘空間，它會嘗試填滿
2. flex-shrink: 2; → 當空間不足時，它縮小的速率為其他元素的 2 倍
3. flex-basis: 300px; → 初始寬度為 300px

---

🔹 flex-grow vs flex: 1 的區別

• flex-grow: 1; 只是設定 擴展行為，但不改變 初始大小
• flex: 1; 同時設定擴展、縮小、初始大小，通常讓元素 平均分配空間
• flex: 1 0 auto; 不會縮小，但仍會填滿可用空間

📌 範例

.container {
  display: flex;
}
.item {
  flex-grow: 1;
  flex-basis: 150px;
}

所有 .item 會填滿剩餘空間，但最小寬度是 150px。

---

🎨 flex-basis 與 width 的區別

• flex-basis 優先度更高，如果 flex-basis: 200px;，那 width 會被忽略
• width 只會在 沒有設置 flex-basis 時才生效

📌 範例

.item {
  flex-basis: 200px;
  width: 100px; /* 不會生效 */
}

最終 .item 會是 200px，而非 100px。

🎯 Flexbox 總結

✅ display: flex; 讓元素變成 彈性容器
✅ flex: 1; 讓子元素 均分空間
✅ flex-grow 控制 子元素擴展大小
✅ flex-shrink 控制 子元素縮小速率
✅ flex-basis 設定 初始大小

📚 學習資源

• MDN - Flexbox
• CSS Tricks - Flexbox Guide