你有沒有遇過這種狀況：排一個橫向的區塊，結果文字或圖片怎麼對都不整齊？
以前我們常常用 float 或 inline-block 來處理，結果不是跑版就是空隙很奇怪，超崩潰對吧？

這時候，Flexbox 就是你的救星！
它就像一個「聰明的收納盒子」，不管裡面的東西大小怎麼變，都能幫你排得整整齊齊~

什麼是 Flexbox？

Flexbox 的中文是「彈性盒子」，顧名思義，它是一種「有彈性的排版方式」。

• 我們把一個容器（container）設定成 display: flex，它裡面的子元素就會自動變成彈性項目（items）。
• Flexbox 最大的特點就是：可以自由控制橫向或縱向的排列方式，還能快速做到置中、平均分配。

Flexbox 的常用屬性

（1）容器屬性

這些屬性是寫在「外層容器」上的：

• display: flex → 開啟彈性盒子模式
• flex-direction → 決定排列方向

 • row（橫向，預設）
 • column（直向）

• justify-content → 主軸（通常是橫向）的對齊方式

 • flex-start：靠左
 • center：置中
 • flex-end：靠右
 • space-between：兩端對齊，中間等分
 • space-around：平均分配，包含邊距

• align-items → 次軸（通常是垂直）的對齊方式

 • flex-start：靠上
 • center：置中
 • flex-end：靠下
 • stretch：自動撐滿

（2）項目屬性

這些屬性是寫在「子元素」上的：

• flex-grow → 可以不要那麼小，往外撐大
• flex-shrink → 可以縮小，避免超出去
• flex-basis → 預設大小

👉 常用簡寫：

flex: 1; /* 等於 flex-grow:1; flex-shrink:1; flex-basis:0 */

範例：三個盒子平均分配

html:

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

css:

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

.item {
  flex: 1;
  margin: 10px;
  background: lightblue;
  text-align: center;
  padding: 20px;
}

結果：三個盒子會平均分配，還會自動保持等距

小練習

今天來試試看幾個任務：

1.導覽列：四個按鈕平均分布在同一排
2.分欄版面：左邊固定 200px 的側邊欄，右邊是自動填滿的主要內容
3.置中卡片：不管螢幕大小，卡片永遠水平置中、垂直置中

🎯小結

今天我們學到：
• Flexbox 幫我們解決了舊的排版痛點
• 容器屬性：flex-direction、justify-content、align-items
• 項目屬性：flex-grow、flex-shrink、flex-basis
• Flexbox 在導覽列、分欄、置中等地方超好用！