CSS Flexbox vs Grid 怎麼選？2026 前端佈局實戰比較完整指南

Flexbox vs Grid 核心差異

說真的，這個問題我被問過無數次了。每次有新人加入團隊，或是在技術社群回答問題，幾乎都會遇到：「楊姐，Flexbox 跟 Grid 到底差在哪？我什麼時候該用哪個？」

我的答案通常讓人有點意外：這兩個不是競爭關係，它們是互補的工具。但在你真正理解它們之前，讓我先從最根本的差異說起。

Flexbox 是一維佈局系統，它沿著一條軸線排列元素，可以是水平（row）或垂直（column），但一次只能控制一個方向。Grid 則是二維佈局系統，它同時控制行（row）和列（column），讓你可以精確定位元素在整個二維平面上的位置。

聽起來很簡單對吧？但實際開發時，很多人還是選錯工具，然後花大量時間在用 Flexbox 做本來該用 Grid 做的事，或反過來。這篇文章就是要幫你建立正確的判斷直覺。

一維 vs 二維佈局：圖解理解

讓我用最直觀的方式解釋。想像你在排版一個導航列（navbar）裡的選單項目：

/* Flexbox 處理導航列 - 完美！ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

選單項目沿著一條水平線排列，這就是一維佈局。Flexbox 在這裡如魚得水。

但如果你要做一個相片牆，每張照片要整齊排在幾行幾列的格子裡：

/* Grid 處理相片牆 - 優雅且強大 */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

這就是二維佈局，Grid 一行代碼就搞定了，如果用 Flexbox 要加很多奇怪的 hack 才能達到同樣效果。

Flexbox 最適合的場景

根據我多年實戰經驗，以下這些情況我幾乎都會選 Flexbox：

1. 導航列與頁首

Logo 在左，導航連結在右，這種「一排東西要對齊」的場景，Flexbox 是最自然的選擇。

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 64px;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

2. 卡片內部佈局

一張文章卡片，通常包含圖片、標題、摘要、標籤和按鈕。讓卡片垂直排列這些元素，並讓按鈕「推」到底部，Flexbox 的 flex-direction: column 搭配 margin-top: auto 是我最常用的技巧：

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex: 1; /* 佔用剩餘空間 */
}

.card-footer {
  margin-top: auto; /* 推到底部 */
}

3. 按鈕群組與行內元素

一排按鈕要置中對齊，或是 icon 跟文字要垂直居中，Flexbox 是最直覺的解法：

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.button-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

4. 側邊欄佈局（單一軸線）

垂直導航選單、側邊標籤列這類單一方向的佈局，Flexbox 的 flex-direction: column 非常好用。

總結一句話：當你的東西基本上是「一排」或「一列」時，用 Flexbox。

Grid 最適合的場景

Grid 真正發光發熱的地方，是那些需要「同時控制行與列」的複雜佈局。

1. 整體頁面佈局

這是 Grid 最經典的使用場景。把整個頁面切成 header、sidebar、main、footer：

.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

這種寫法的可讀性極高，其他同事一眼就能看懂整個頁面結構。

2. 卡片格子系統

商品列表、文章列表、相片牆，只要需要「N 行 M 列」的整齊格子，Grid 的 auto-fill 搭配 minmax 是神器：

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

這一行就做到了「響應式格子，每格最小 300px，盡量填滿」，不需要任何 media query！

3. 雜誌式複雜佈局

新聞網站首頁那種「頭條大圖 + 右邊三則小新聞」的佈局，用 Grid 的 grid-column 和 grid-row 可以精確控制：

.news-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 1rem;
}

.featured-article {
  grid-column: 1;
  grid-row: 1 / 4; /* 跨越三行 */
}

混合使用實戰範例

這才是真實開發的樣子：Grid 負責大框架，Flexbox 負責細節。我稱這個為「外 Grid 內 Flexbox」原則。

來看一個完整的部落格文章列表頁：

/* Grid 控制整體頁面結構 */
.blog-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Grid 控制文章卡片的格子 */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  align-content: start;
}

/* Flexbox 控制單張卡片內部排列 */
.article-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #666;
}

.article-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: 1rem 1.5rem;
}

看到了嗎？Grid 管「在哪裡」，Flexbox 管「怎麼排」。這兩者完全不衝突，反而互相補足。

更多關於 Grid 的細節，可以參考這篇CSS Grid 完整教學，裡面有更深入的 Grid 屬性說明。

2026 新特性：Subgrid

Subgrid 是我最近在用的一個新特性，它解決了一個長久以來的痛點：子元素無法繼承父元素的 Grid 軌道。

想像你有一個三欄的卡片格子，每張卡片裡面都有標題、內文、標籤三個部分。傳統做法，每張卡片的這三個部分無法互相對齊，因為它們在各自獨立的 Grid context 裡。

Subgrid 解決了這個問題：

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 3;
  /* 繼承父元素的行軌道！ */
  grid-template-rows: subgrid;
  gap: 0;
}

.card-title { /* 對齊到第一行 */ }
.card-body  { /* 對齊到第二行 */ }
.card-tags  { /* 對齊到第三行 */ }

現在所有卡片的標題、內文、標籤都會在同一水平線上對齊，視覺上非常整齊。Subgrid 的瀏覽器支援度在 2025 年底已經達到 90%+，可以放心使用了。

Container Queries 搭配使用

Grid 和 Flexbox 搭配 Container Queries 使用，可以讓元件真正做到「根據自身容器大小調整佈局」，而不是依賴 viewport 寬度。

這篇CSS Container Queries 教學有詳細介紹，這裡我只舉一個實用例子：

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: flex;
  flex-direction: column;
}

/* 當卡片容器寬度大於 500px，改成橫排 */
@container card (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card__image {
    width: 200px;
    flex-shrink: 0;
  }
}

搭配 Tailwind CSS v4 的新特性，這樣的響應式寫法會更加簡潔，可以參考Tailwind CSS v4 新功能了解最新動態。

效能考量與最佳實踐

有些人問我，Flexbox 和 Grid 哪個效能比較好？老實說，在現代瀏覽器裡，兩者的效能差異幾乎可以忽略不計。但有幾個實踐原則值得注意：

避免過度嵌套

我見過有人把整個頁面嵌套了七八層的 Grid，每層都有複雜的 grid-template-areas。這不只效能有問題，維護起來也是噩夢。保持扁平的結構，能用兩層解決的不要用三層。

善用 gap 取代 margin

/* 不推薦 */
.flex-container > * + * {
  margin-left: 1rem;
}

/* 推薦 */
.flex-container {
  display: flex;
  gap: 1rem;
}

gap 屬性現在在 Flexbox 和 Grid 都完全支援，它不會在第一個元素前或最後一個元素後加上間距，比用 margin 更直覺。

用 place-items 簡化置中

/* Grid 完美置中 */
.center-container {
  display: grid;
  place-items: center; /* 等同於 align-items + justify-items */
  min-height: 100vh;
}

這是我最喜歡的「完美置中」方法，比 Flexbox 的 align-items: center; justify-content: center; 還要簡潔。

CSS Logical Properties

2026 年了，如果你的產品有多語言需求（特別是有阿拉伯語、希伯來語等 RTL 語言），記得用邏輯屬性：

/* 不用這樣 */
.element {
  margin-left: 1rem;
  padding-right: 2rem;
}

/* 改用邏輯屬性，RTL 自動適應 */
.element {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
}

常見問題 FAQ

Q：我已經會 Flexbox 了，還需要學 Grid 嗎？

絕對需要。Flexbox 能做的事情 Grid 幾乎都能做，但反過來不成立。頁面級的佈局如果用 Flexbox 實作，代碼量會多很多，而且可維護性差。

Q：Bootstrap 的格線系統跟 CSS Grid 哪個好？

如果你的專案已經用 Bootstrap 就繼續用，但新專案我強烈建議直接用原生 CSS Grid。原生 Grid 更強大、更靈活，而且不需要引入額外的 CSS 框架。

Q：Tailwind CSS 用 Flexbox 還是 Grid？

Tailwind 兩個都支援，flex、grid、grid-cols-3 等工具類別都很完整。選哪個取決於你的佈局需求，不取決於框架。

Q：舊版 IE 要怎麼辦？

2026 年了，IE 的市佔率已經幾乎為零。如果你還在支援 IE，那是另一個更根本的問題需要討論。現代瀏覽器對 Flexbox 和 Grid 的支援都非常完整。

總結：我的選擇框架

讓我給你一個快速決策框架：

• 一排或一列的元素對齊 → Flexbox
• 整體頁面結構 → Grid
• 卡片格子系統 → Grid（外層）+ Flexbox（卡片內部）
• 導航列、按鈕群組 → Flexbox
• 複雜雜誌式佈局 → Grid
• 不確定的時候 → 先想「我需要控制幾個方向？」一個方向用 Flexbox，兩個方向用 Grid

說到底，兩個工具都要熟練，這才是 2026 年前端工程師應有的基本功。不要執著於「哪個比較好」，而是培養「什麼場景用什麼工具」的直覺。

多寫多練，你很快就會發現，在正確的場景用正確的工具，代碼會變得非常優雅簡潔。祝大家佈局順手！