為什麼要學 Flexbox？

在 RWD（響應式設計）時，Flexbox 幾乎是必備技能。它能夠輕鬆控制元素的排列、對齊、分配空間，比傳統的 float 或 table 排版更直觀。

Flexbox 的基本概念

只要在父容器加上 display: flex;，子元素就會變成「彈性項目」，可以根據設定自動調整排列方式。

.container {
  display: flex; /* 啟用 Flexbox */
}

常用屬性整理

父容器 (Flex Container)

• flex-direction：決定主軸方向
  • row（水平，預設）
  • row-reverse
  • column（垂直）
  • column-reverse
• justify-content：主軸對齊
  • flex-start（靠左/上）
  • flex-end（靠右/下）
  • center（置中）
  • space-between（平均分散，首尾貼齊）
  • space-around（平均分散，兩側留空）
  • space-evenly（平均分散，間距完全相等）
• align-items：交叉軸對齊
  • stretch（撐滿，預設）
  • flex-start
  • flex-end
  • center
  • baseline
• flex-wrap：換行
  • nowrap（不換行，預設）
  • wrap（超出時換行）
  • wrap-reverse

子元素 (Flex Item)

• flex：縮寫，通常寫 flex: 1;表示平均分配剩餘空間
• order：改變元素排序
• align-self：單獨控制某個子元素的對齊方式

範例：三欄自適應佈局

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

.container {
  display: flex;
  justify-content: space-between; /* 三欄平均分散 */
  align-items: center; /* 垂直置中 */
  height: 200px;
  border: 2px solid #333;
}

.box {
  flex: 1; /* 三欄自動平分 */
  margin: 5px;
  background: #4cafef;
  color: #fff;
  font-size: 24px;
  text-align: center;
  padding: 20px;
}

小練習 💡

試著用 Flexbox 做一個：

1. 導覽列（左邊 Logo、右邊選單，水平排列）
2. 三個等高等寬的卡片（RWD：小螢幕時自動換行）

👉 明天（Day 8）我們就會進入Grid 佈局，和 Flexbox 做比較，讓你能應對更複雜的版型設計。