昨天我們掌握了 CSS 單位（px、em、rem、%、vh、vw），今天要把「元素排列」升級，學會 Flex 與 Grid 排版，這些之前都有多少用到，今天剛好來講講，讓元件在不同螢幕上都能漂亮排列~

1. 為什麼要學 Flex / Grid？

在實務中，常遇到這些問題：

1. 按鈕群組要水平平均間距
2. 卡片列表要自動換行、間距一致
3. 版面左右兩欄固定比例，內容自動撐滿....

解法 → Flex 與 Grid 提供「彈性排版能力」，比傳統 float / inline-block 更穩定，且支援 gap 控制間距

2. Flex 舉例

HTML：

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

CSS：

.flex-container {
  display: flex;         /* 轉成彈性盒 */
  flex-direction: row;   /* 水平排列 (預設) */
  justify-content: space-between; /* 子元素水平分散 */
  align-items: center;   /* 垂直置中 */
  gap: 10px;             /* 子元素間距 */
}

.flex-item {
  background: #ffd6a5;
  padding: 20px;
  flex: 1;               /* 平均分配寬度 */
  text-align: center;
}

Flex 核心概念：

• display: flex→ 將父容器變彈性盒
• flex-direction → 排列方向 row/column
• justify-content → 主軸對齊（水平）
• align-items → 交叉軸對齊（垂直）
• gap → 子元素間距，避免用 margin 造成折疊問題

3. Grid 舉例

HTML：

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

CSS：

.grid-container {
  display: grid;                /* 啟用 Grid 排版 */
  grid-template-columns: repeat(2, 1fr); /* 兩欄平均分 */
  gap: 15px;                     /* 間距 */
}

.grid-item {
  background: #caffbf;
  padding: 20px;
  text-align: center;
}

Grid 核心概念：

• display: grid → 父容器變網格
• grid-template-columns → 設定列數與比例
• gap → 控制列與行間距
• fr 單位 → 自動分配剩餘空間

• Flex → 一維排列（水平或垂直）
• Grid → 二維排列（列與欄）

4. Flex 與 Grid 適用場景

5.範例：RWD 卡片列表

!

學習心得

學完 Flex 和 Grid 後，排版對我來說還是有點難度，但還是有變得簡單一些。以前用 float 或 inline-block，常常要算 margin，還要擔心東西跑掉，弄得很麻煩，腦袋會炸掉。

但今天學到很多排版的，像是：Flex 可以讓元素水平或垂直排列，調整位置比較直覺、Grid 則可以把版面分成格子，自動對齊、gap 也讓間距很好控制，修改起來比較方便。