前幾天有用過 text-align: center; 或 margin 來做排版，但如果頁面有很多元素，這些基礎方式會變得很難控制。
這時候就需要 Flexbox 和 Grid，它們能幫助我們更快速、彈性地完成排版。

Flexbox（彈性盒模型）

Flexbox 適合用來 水平或垂直對齊、分布元素

範例：讓三張圖片平均分佈在一排
html:

css:

• 說明:

  • display: flex; → 將容器轉換為 Flexbox 佈局，子元素（flex items）就會依照彈性規則排列

  • justify-content: space-around;→ 控制子元素在 主軸（水平方向） 的排列方式。space-around 會在每個項目的左右都加上間距，使它們平均分散
    其他常見選項：

    • flex-start → 全部靠左
    • flex-end → 全部靠右
    • center → 全部置中
    • space-between → 項目間隔平均，但最左和最右緊貼容器邊界

  • align-items: center;→ 控制子元素在 交叉軸（垂直方向） 的對齊方式。center 會讓所有項目在容器垂直方向置中。
    其他常見選項：

    • flex-start → 項目靠上
    • flex-end → 項目靠下
    • stretch → 自動拉伸填滿高度（預設值）
• 常用屬性:
  • justify-content: 控制水平排列（flex-start, center, space-between, space-around）
  • align-items: 控制垂直對齊（flex-start, center, flex-end）
  • flex-wrap: 是否換行

Flexbox 適合用在「單行或單列」的排版，例如導覽列（Navigation Bar）、按鈕群組

CSS Grid（網格系統）

Grid 適合用來做複雜的版面設計，像是多欄排版

範例：把圖片放成 2x2 網格。
html:

css:

• 說明:

  • display: grid; →把容器轉為 Grid 佈局，子元素自動變成網格項目
  • grid-template-columns: 1fr 1fr; →建立兩個欄位，各佔剩餘空間的一半。fr 是「比例單位」，很適合做自適應排版
  • gap: 10px; →設定欄與列的間距，等於同時指定 row-gap 與 column-gap

• 常用屬性:

  • grid-template-columns / grid-template-rows: 定義欄數與列數
  • gap: 設定元素間的間距
  • grid-column / grid-row: 控制元素跨欄跨列

• 小建議:

  • 圖片在 grid 中建議設定 max-width:100% 與 height:auto，避免拉長或變形
  • 若要垂直間距或排列更細緻，可同時搭配 align-items（控制 grid cell 內垂直對齊）與 justify-items（控制水平對齊）

Grid 適合用在「整體版面」的規劃，例如相簿、商品展示頁

小筆記（Flexbox vs Grid）

Flexbox：比較適合一列或一行的元素對齊，像「水平/垂直導覽列」
Grid：適合做二維佈局，像「圖片牆、排版區塊」
常見做法：外層用 Grid，內層用 Flexbox → 先規劃版面，再微調內容