RWD 網頁設計（八）： Flexbox 與 Grid 版型設計

2025年4月10日 rwdweb

前言

學會了基本的 RWD 斷點、媒體查詢之後，下一步就是讓你的版型更靈活！本章將帶你深入認識 Flexbox 與 CSS Grid 的進階用法，讓你的網站不只響應式，還能有彈性又美觀的排版效果。

一、Flexbox 進階屬性

Flexbox 是一維（單行/單列）排版的強大工具。進階屬性讓你控制元素排序、空間分配，打造更有彈性的版型。

1. order：自訂排序

不用改 HTML 順序，也能調整顯示順序。

.item1 { order: 2; }
.item2 { order: 1; }

.item2 會排在 .item1 前面。

2. flex-grow、flex-shrink、flex-basis

flex-grow：剩餘空間如何分配
flex-shrink：空間不足時如何縮小
flex-basis：預設主軸空間

.item {
 flex-grow: 2;
 flex-shrink: 1;
 flex-basis: 150px;
}

3. 實作：自訂排序與彈性分配

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

.flex-container {
 display: flex;
}
.item1 { order: 2; flex-grow: 2; }
.item2 { order: 1; flex-grow: 1; }

效果：B 會排在 A 前面，A 佔的空間較大。

二、複雜彈性排版

Flexbox 支援多層嵌套，讓你能輕鬆做出導覽列、多欄內容區等複雜版型。

實作：RWD 導覽列與多欄內容區

<div class="nav-container">
 <nav class="navbar">Menu</nav>
</div>
<div class="main-container">
 <div class="sidebar">Sidebar</div>
 <div class="content">Content</div>
</div>

.nav-container {
 display: flex;
 justify-content: space-between;
}
.main-container {
 display: flex;
}
.sidebar { flex: 1; }
.content { flex: 3; }

這樣就能在不同螢幕下自動調整欄寬。

三、CSS Grid 深入應用

Grid 適合二維（多行多列）排版，能快速打造圖片牆、卡片區塊等。

1. grid-template-areas

用區塊命名方式，讓版型一目了然。

.grid-container {
 display: grid;
 grid-template-areas:
   "header header"
   "sidebar main"
   "footer footer";
 grid-template-columns: 1fr 3fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

2. auto-fill、auto-fit

自動填滿可用空間，圖片牆最實用！

.gallery {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 16px;
}

3. 實作：自動調整欄數的圖片牆

<div class="gallery">
 <img src="img1.jpg" />
 <img src="img2.jpg" />
 <img src="img3.jpg" />
</div>

.gallery {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 16px;
}
.gallery img {
 width: 100%;
 display: block;
}

四、Flexbox 與 Grid 混合運用

一個頁面常常同時需要 Flexbox 與 Grid，各取所長。

實作：首頁多區塊響應式布局

<div class="homepage">
 <header>Header</header>
 <section class="features">Features</section>
 <section class="products">Products</section>
 <footer>Footer</footer>
</div>

.homepage {
 display: grid;
 grid-template-areas:
   "header"
   "features"
   "products"
   "footer";
}
.features {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}