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 年前端工程師應有的基本功。不要執著於「哪個比較好」,而是培養「什麼場景用什麼工具」的直覺。
多寫多練,你很快就會發現,在正確的場景用正確的工具,代碼會變得非常優雅簡潔。祝大家佈局順手!
繼續閱讀
CSS Container Queries 教學:響應式設計的新時代終於來了
Media Queries 看的是視窗大小,但元件不一定只活在全寬的地方。Container Queries 讓你的 CSS 根據容器大小來變化,真正實現元件級的響應式設計。
相關文章
你可能也喜歡
探索其他領域的精選好文