本教學將循序漸進,帶領你探索如何以語義化的 HTML 打好結構基礎,再運用 CSS 強大的版面工具(Flexbox 彈性盒佈局和 Grid 網格佈局)來實現精準且高效的佈局,最後掌握響應式設計的關鍵技巧,確保你的版面能優雅地適應各種裝置。全篇將結合最新的國外實戰觀點,提供清晰的範例程式碼與原理講解,讓你在不依賴 Bootstrap、SCSS 等框架的情況下,也能輕鬆打造出專業的網頁版型。
HTML 結構設計:打造語義化的版面基礎
在開始進行華麗的 CSS 排版之前,請先想像 HTML 結構如同建築物的地基與骨架。如果地基不穩,即使裝潢再精美,整棟建築終將傾斜走樣。同樣地,一個語義良好的 HTML 結構能讓網站具有穩固的版面基礎,方便後續 CSS 施展拳腳。
現代 HTML 提供了豐富的語義化標籤,讓我們不必再依賴滿頁的 <div> 來拼湊佈局。常見的語義標籤如 <header>、<nav>、<main>、<section>、<article>、<aside> 和 <footer> 等,清楚地表達出各區塊的角色。例如:
<header>:頁首區域,通常包含網站標題或 Logo。
<nav>:導航選單區域,包含網站主要連結。
<main>:主內容區域,頁面中獨一無二的主要內容。
<aside>:側欄區域,提供次要資訊,如相關連結或廣告。
<footer>:頁尾區域,包含版權、聯絡資訊等。
透過這些標籤,開發者和瀏覽器都能「讀懂」結構的意圖。不僅提升了程式碼的可讀性與可維護性,也為 SEO 和無障礙設計(Accessibility)加分。
範例:基本頁面結構的 HTML 標記
以下是一個簡化的頁面結構範例,我們運用語義標籤劃分出典型的網頁區塊。程式碼中附加了一點簡單的 CSS,只為了讓區塊邊界清晰可見:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>範例網站</title>
<style>
header, nav, main, aside, footer {
border: 2px solid #555;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<header>網站頁首(Logo 與標題)</header>
<nav>導航選單(主頁｜關於｜服務｜聯絡)</nav>
<main>
<section>
<h1>主要內容標題</h1>
<p>這裡是主內容區域。</p>
</section>
</main>
<aside>側欄內容(例如相關連結或廣告)</aside>
<footer>頁尾資訊 © 2025</footer>
</body>
</html>
在上述結構中,我們可以清楚地看到各區域的劃分:頁首、導覽、主內容、側欄與頁尾。雖然目前只用簡單的邊框來區分區域,沒有任何精美的排版,但一個良好的 HTML 結構已經就緒。接下來,CSS 就能在這穩固的骨架上發揮威力了。
在結構設計完成後,我們便擁有了整齊的「骨架」,能讓 CSS 排版更具方向感。現在,是時候將目光轉向 CSS,看看如何利用現代的布局技術將這幅骨架「生動地」呈現在瀏覽器中了。
CSS 排版技巧:Flexbox 彈性盒佈局
當你的 HTML 結構準備就緒後,第一個強大的 CSS 工具便是 Flexbox(Flexible Box Layout,彈性盒佈局)。Flexbox 擅長處理單一方向(一維)的空間分配,無論是水平一排的導航列,還是垂直堆疊的卡片列表,Flexbox 都能輕鬆應對。它彈性的特質讓區塊在容器內能自動調整大小、對齊及間距,再也不需要寫繁瑣的計算或依賴古老的 float 來達成。
想像你正在打造一個置頂導覽列,裡面有幾個選單連結,還希望在兩側放置 Logo 和搜尋框。傳統方式可能要用到 float 以及各種微調,但 Flexbox 讓這種佈局變得直觀許多。我們只要將導覽列容器設為 display: flex,剩下的就交給 Flexbox 幫我們處理。
Flexbox 原理速覽
Flexbox 的核心理念是定義「容器」(container)和「項目」(items)。將容器設為 display: flex 後,其中的直系子元素就自動成為 flex item,接著你可以運用各種屬性來控制這些項目的排列:
flex-direction: 決定主軸方向,可以是水平方向的 row 或垂直的 column。
justify-content: 沿著主軸(水平排列時即水平方向)對齊項目,如 flex-start、center、space-between 等。
align-items: 沿著交叉軸(與主軸垂直的方向)對齊項目,如 stretch、center、flex-end 等。
flex-wrap: 允許項目在空間不足時是否換行排列。
透過這幾項設定,我們幾乎可以實現絕大多數一維方向的排列需求,例如水平置中、垂直置中、項目間平均分配空白等等。最受歡迎的一個技巧莫過於垂直置中:只要簡單兩行 justify-content: center; align-items: center;,就能讓容器裡的元素完美置中,不再需要 table 或繁瑣的行高技巧。
範例:製作一個響應式導覽列
下面的範例展示如何使用 Flexbox 打造一個響應式的導覽列。這個導覽列會將內容均勻分配兩側並置中排列,同時隨視窗縮放自適應:
<nav class="navbar">
<a href="#" class="logo">MySite</a>
<div class="menu">
<a href="#">主頁</a>
<a href="#">關於我們</a>
<a href="#">服務項目</a>
<a href="#">聯絡我們</a>
</div>
<a href="#" class="search-icon">搜尋????</a>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px 20px;
}
.navbar a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
.menu {
display: flex;
}
.menu a {
margin: 0 15px;
}
</style>
在這段程式碼中,我們將 .navbar 設為 display: flex 容器。justify-content: space-between 使得 .navbar 裡三個主要子元素(左側的 Logo、中間的選單鏈結群組、右側的搜尋圖示)左右兩端對齊且撐開空間,而 align-items: center 則確保它們在垂直方向(交叉軸)居中對齊。接著,我們把中間的選單部分 .menu 也設為一個 flex 容器,將選單鏈結橫向排列並均勻間隔開。
透過 Flexbox,上述導覽列可以自適應不同螢幕寬度:當空間不足時,Flexbox 會讓選單自動收縮或換行(如果我們加上 flex-wrap),確保佈局不會溢出。你可以試著調整視窗大小,會發現 Logo、選單和搜尋圖示始終保持合理的間距。
值得一提的是,Flexbox 不僅僅適合導覽列。任何需要一字排開或垂直堆叠的區塊,例如圖片列表、卡片佈局、表單欄位對齊等,都可以考慮使用 Flexbox 來簡化實作。當然,如果你的版型需求超過單一方向,例如需要同時管理列與欄的位置,就該交棒給我們接下來要介紹的 CSS Grid 了。
(小提示:初學 Flexbox 時,常見的困惑之一是區分 align-items 與 align-content。記住,前者用於單行容器的項目對齊,後者則在有多行(即換行)時作用於整個行的對齊。)
現在,我們已經能運用 Flexbox 來處理許多排版需求,但是當面對更複雜的二維版面時,Flexbox 可能就力有未逮。別擔心,CSS 還有另一個強大的版面好手:Grid 網格佈局,它正是為了解決此類問題而生。
CSS 排版技巧:Grid 網格佈局
CSS Grid 是近年來前端版面設計的明星工具。與 Flexbox 著重一維佈局不同,Grid 天生擅長二維的網格版面,讓我們可以同時掌控列與欄。在 2025 年的今天,Grid 已被廣泛應用在各大網站的主版型架構上 —— 根據近期的開發者調查,有超過七成的前端工程師經常使用 Grid 來實現複雜佈局,可見其重要性。
Grid 布局透過將容器劃分成明確的網格單位(cells),開發者可以指定每個元素在網格中的位置,類似於繪製版面藍圖。這種直接定位的能力,讓我們不再需要巢狀多重的 <div> 或花哨的技巧就能實現精確的佈局。例如,我們可以很輕鬆地排出一個典型的網站版面:上方是橫跨全頁的頁首和導覽列,中間分成主內容區與側欄,底部是頁尾。使用 Grid,只需要幾行 CSS 定義,就能完成這種報紙般的欄位編排。
Grid 原理速覽
要使用 Grid,首先將一個容器設定為 display: grid。然後,你可以使用以下屬性定義網格結構:
grid-template-columns 和 grid-template-rows: 定義欄與列的數量和大小。你可以指定固定長度(如 300px)、相對比例(如 1fr 代表剩餘空間的一份)或 auto 等等。也可以使用 repeat() 簡化重複的定義。
grid-gap 或新語法的 gap: 定義網格項目間的間距,方便產生留白。
grid-template-areas: (可選)使用直觀的方式命名網格區域,之後直接將項目放入命名的區域中。
而每一個容器內的子元素(grid item),則可以透過以下屬性控制在網格中的位置:
grid-column 和 grid-row: 指定該元素橫跨哪些欄位和列(以起始-結束線編號或 span 數量表示)。
grid-area: 若使用了 grid-template-areas,可以直接將元素放入對應的區域名稱。
範例:典型版面佈局的 Grid 應用
延續前面的 HTML 結構範例,現在我們用 CSS Grid 來實現一個典型的雙欄網頁佈局:上方是頁首和導覽列(各佔一行),中間分左右兩欄(主內容 + 側欄),下方是跨全欄的頁尾。如下範例所示:
<div class="container">
<header>網站頁首</header>
<nav>導航選單</nav>
<main>主內容區</main>
<aside>側欄區</aside>
<footer>頁尾資訊</footer>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"header header"
"nav nav"
"main aside"
"footer footer";
gap: 10px;
min-height: 100vh;
}
header { grid-area: header; background: #4A8; color: #fff; padding: 20px; }
nav { grid-area: nav; background: #69C; color: #fff; padding: 15px; }
main { grid-area: main; background: #eee; padding: 15px; }
aside { grid-area: aside; background: #ddd; padding: 15px; }
footer { grid-area: footer; background: #666; color: #fff; padding: 10px; text-align: center; }
</style>
在這段 CSS 中,我們將 .container 定義為一個網格容器,並指定了網頁的區塊佈局:
列(Rows):grid-template-rows: auto auto 1fr auto 分別對應頁首、導覽、主區域、頁尾的列高。其中主區域列使用 1fr 來佔滿剩餘空間,以實現頁面高度自適應(min-height:100vh 確保頁面至少佔滿視窗高度)。
欄(Columns):grid-template-columns: 1fr 300px 定義主要內容欄寬度為彈性伸展(1fr),側欄固定寬度 300px。這樣無論螢幕多寬,主內容區都會擴展填滿多餘空間,而側欄保持固定寬度。
區域(Areas):grid-template-areas 直觀地描繪了版面的區塊分佈。我們將 header 和 nav 各佔一整行(兩個引號內重複相同名稱表示橫跨兩欄),第三行由 main 和 aside 組成兩欄,最後一行 footer 橫跨兩欄。
接著,我們為每個語義標籤指定了各自的 grid-area 名稱,對應網格區域,並加上一些背景色與留白以示意。如此一來,不需改動 HTML 結構,我們就「畫」出了一個清晰的版面:
頁首與導覽列各自佔據頂部的兩行,橫跨整個畫面寬度。
主內容和側欄並排排列,中間以 gap 間隔。
頁尾同樣橫跨全寬,固定在底部。
試著調整瀏覽器寬度,會發現頁面結構穩定:主內容區隨螢幕寬度伸縮,而側欄維持既定寬度。這正是 Grid 強大的地方 —— 矩陣式的配置讓複雜版面變得可以預期且易於維護。
Grid 另一個便利之處在於可以重排元素而不必修改 HTML。例如,只要改變 grid-template-areas 的定義或單獨調整某個元素的 grid-column、grid-row,我們就能在不同斷點下重新佈局元素的位置,卻不需要在 HTML 裡搬動區塊。這對響應式設計尤其有利:我們可以讓某些區塊在手機上顯示於不同位置(例如側欄內容移到主內容下方),而桌面版則維持原來的排列 —— 所有這些變化僅靠 CSS 即可辦到。
談到這裡,你可能會想:既然有了 Flexbox 和 Grid 兩大神兵利器,響應式設計是不是就輕而易舉了?的確,這兩種佈局系統本身就是為彈性而生,它們能夠隨容器大小自動調整。不過,要真正打造「面面俱到」的響應式體驗,我們仍需一些額外的技巧和心法,這正是下一節的主題。
響應式設計關鍵技巧:讓版面隨裝置而變
當今使用網際網路的裝置五花八門,從小巧的智慧手機、平板,到寬大的桌機螢幕,甚至手錶與電視。響應式網頁設計(Responsive Web Design)的目的,就是讓同一份 HTML+CSS 能因應不同螢幕尺寸,呈現出最佳的佈局與可讀性。以下是幾個關鍵技巧,確保你的版面「見機行事」:
移動優先思維與彈性單位
在開始動手寫 CSS 之前,養成移動優先(Mobile First)的思維非常重要。這意味著先針對小螢幕(如手機)設計基本版面,確保核心內容清晰可閱,再逐步為較大螢幕增加佈局元素或強化視覺效果。移動優先能迫使我們專注於最重要的內容,同時避免在小螢幕承載過多不必要的元素。畢竟,任何在 320px 寬度下都表現良好的設計,放到 1440px 螢幕時通常也會游刃有餘,反之則不然。
配合這種思維,我們應盡量使用彈性的長度單位來取代固定像素。例如:
使用百分比 (%) 或 vw(視窗寬度單位)來指定寬度,使元素能隨畫面尺寸伸縮。
使用 rem 或 em 作為字體大小和間距的單位,讓排版能相對於根節點或父元素進行縮放。在一個廣泛使用的策略中,我們可以根據視窗大小調整根 <html> 的字體大小,從而影響整站的排版比例—— 這比起在每個斷點手動更改各元素大小來得省力且一致。
善用 CSS 函數如 min(), max() 及 clamp() 來設定長度範圍。例如 width: clamp(200px, 50%, 800px) 確保元素寬度隨比例變化但不小於 200px 也不超過 800px。
使用彈性單位意味著在許多情況下,即使不寫媒體查詢(media queries),版面也能隨螢幕自動調整,因為元素尺寸本身就是相對和流動的。Flexbox 與 Grid 天生就是彈性的:只要使用 fr、百分比或 auto 來定義格線,或讓 flex item 根據內容自適應,基本的響應性就存在了。
媒體查詢與斷點設計
儘管彈性單位很強大,我們仍然需要媒體查詢來處理截然不同的版面配置。媒體查詢允許我們根據視窗的尺寸或其他特性,套用不同的 CSS 規則。這就是我們實現一套 CSS 適配多種螢幕的祕密武器。
如何選擇斷點(Breakpoint)呢?內容導向是關鍵原則:與其死板地按照裝置(手機、平板、桌機)的尺寸來定斷點,不如觀察頁面佈局何時開始「撐不下」或出現過多留白。當某個寬度下版面看起來不佳時,就是該加入斷點的時機。常見的大致範圍雖然有例如 600px、768px、1024px、1440px 等,但這些數字不是絕對規則,應視你的設計和受眾設備而定。
讓我們繼續前一節的網格佈局範例,加入媒體查詢來強化響應式效果:在窄螢幕時將側欄移到主內容下方,使版面變成單欄;在更小螢幕時甚至隱藏掉不重要的側欄內容。以下是一個簡化示例:
/* 預設:桌機版雙欄佈局 (已在上一節範例定義) */
.container {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-areas:
"header header"
"nav nav"
"main aside"
"footer footer";
}
/* 當寬度小於 768px (平板或手機) 時,改為單欄佈局 */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
/* 當寬度小於 480px (小型手機) 時,隱藏側欄以專注主內容 */
@media (max-width: 480px) {
aside {
display: none;
}
}
在這段 CSS 中,我們設定了兩個常見的斷點:
當視窗寬度小於 768px 時,將 .container 改為單欄網格,讓 header、nav、main、aside、footer 順序垂直排列(我們在 grid-template-areas 列表中將 aside 放到 main 之後,讓它顯示在主內容下方)。這樣一來,平板或較小裝置可以上下滾動瀏覽內容,而不需要橫向卷動。
當寬度再小於 480px 時,乾脆隱藏整個側欄 <aside>(假設側欄內容在狹小螢幕上可有可無)。如此一來,最有限的螢幕空間可以百分之百留給主內容,提高可讀性。
實際項目中,斷點的選擇與樣式調整應更為細緻,但以上範例足以說明媒體查詢的精隨:我們根據需要,主動改變版面配置,以因應不同裝置的挑戰。
組合 Flexbox 與 Grid 的最佳實踐
值得強調的是,Flexbox 與 Grid 並非互斥的競爭關係,相反,它們經常搭配使用,發揮各自所長。在一個大型佈局中,你可以:
使用 Grid 架構整體版面(例如決定頁首、側欄、主區塊的位置)。
在每個區塊的內部,再用 Flexbox 做微調(例如頁首內讓 Logo 和選單以 flex 排列,或在主內容區讓多個卡片水平排列並自動換行)。
這種混合佈局的方式能讓你的 CSS 更簡潔,同時保有彈性。Grid 負責「分配大格局」,Flexbox 負責「排列小細節」。在響應式環境下,Grid 可以藉由媒體查詢重組主要區塊的順序或大小,而 Flexbox 則自動調整子元素的對齊與間距 —— 兩者相輔相成,使版面既穩固又靈活。
例如,我們可以把先前導覽列的 Flexbox 例子直接放進 Grid 定義的 header 或 nav 區域中。Grid 負責版面的主架構,Flexbox 則掌控細節排列。如此搭配,你可以更輕鬆地打造一個既保持良好結構又具適應性的網站。
其他實用技巧與新技術
最後,隨著 CSS 不斷演進,我們也應跟上新技術以改進響應式設計:
容器查詢(Container Queries):這是 CSS 新興的功能,允許我們針對元素所在的容器尺寸來定義樣式,而不僅僅依賴視窗尺寸。容器查詢讓元件可以真正在各種版面中自適應 —— 假設一組卡片元件,同樣的 HTML 結構放在主內容區可以排成多欄,放在窄側欄則自動堆成單欄。2025 年時,主要瀏覽器已經廣泛支援容器查詢,建議你開始研究並嘗試應用,讓版面設計更具元件化思維。
CSS 變數與函數:善用 CSS 變數(Custom Properties)來儲存常用的斷點值、色彩、間距等,可讓樣式更易於維護。結合 calc()、minmax()、auto-fit/auto-fill 等 Grid 函數來建立更智慧的彈性網格,減少手寫媒體查詢的需求。
響應式圖片:雖然超出本文範圍,但別忘了 <img srcset>、<picture> 以及各種圖像壓縮與 lazy-load 技術,以確保圖片在各裝置上既清晰又不拖慢載入速度。版面再精美,若圖片載入太慢,使用體驗也會大打折扣。
綜合運用上述技巧,再加上前面提到的 HTML 結構、Flexbox 與 Grid 佈局原理,你就擁有了一套打造專業響應式版面的完整武器庫。
現在,拿起這些工具盡情練習吧!但在動手實作前,我們先來解答一些在實務中常遇到的問題或迷思,進一步鞏固你的理解。
問與答單元
問:Flexbox 和 Grid 該如何選擇?兩者不是都能做很多事嗎?
答: 確實,Flexbox 與 Grid 在排版上各有千秋。Flexbox 擅長一條軸線上的「彈性排列」—— 想像水平的一排按鈕或垂直的一組表單欄位,它能自動調整每個項目的間距、對齊,甚至改變排列順序(透過 order 屬性)。Grid 則處理二維的「網格佈局」—— 適合用在整體頁面框架或需要控制行列交叉的區塊(例如照片畫廊或文章＋側欄的版面)。一般來說,「一維用 Flex,二維用 Grid」是經驗法則:當你的設計只涉及水平或垂直方向的排列,用 Flexbox 會比較簡潔;當你需要同時考慮水平和垂直(例如多行多列的佈局),Grid 會更得心應手。不過在一個完整的網站裡,兩者經常混用——Grid 定義大的區塊排列,Flexbox 微調區塊內元素。一旦熟悉它們,你會發現合力使用能讓布局更優雅。
問:既然有這些原生技術,我還需要 Bootstrap 等 CSS 框架嗎?
答: 這取決於你的專案需求和時程。現今的 CSS 原生佈局功能已經非常強大且方便,大多數標準版面只用 Flexbox 和 Grid 就能搞定,不再像過去那樣非得依賴框架。實際上,使用框架往往會引入額外的程式碼負擔,如果你只需要部分功能,可能還得複寫樣式來覆蓋框架預設設定。自己撰寫 CSS 則能精確掌控版面,程式碼也較輕量。當然,框架仍有其價值:在需要快速產出一致性佈局、或團隊成員背景各異的情況下,框架提供了可靠的樣式基礎。然而,對一個中級開發者來說,建議嘗試不借助框架完成版型,這將大大提升你對 CSS 細節的掌握。而且就相容性而言,Flexbox 和 Grid 早已獲得主流瀏覽器的良好支援(自 2017 年以來各大瀏覽器皆完整支援 Grid),不需要為了相容舊版瀏覽器而放棄新技術;萬一需要支援極舊的瀏覽器,也可以透過特性查詢(@supports)或提供漸進增強的 fallback 方案來兼顧。
問:我以前習慣用 float 和 position: absolute 來排版,現在還需要嗎?
答: 絕大部分情況下,不需要。Flexbox 和 Grid 的出現正是為了解決過去需要靠 float 和絕對定位才能達成的排版需求。傳統上我們用 float 讓元素並排、用 clearfix 清除浮動、用 absolute 配合各種計算移動元素位置,這些技巧如今都可以用更優雅的方式實現。例如,水平並排改用 Flexbox,區塊定位改用 Grid 定義區域。當然,float 現在仍適合用來讓文字環繞圖像(畢竟 Flexbox/Grid 不做文字環繞),absolute 也在需要脫離文檔流的特殊情境下有用(例如製作疊在一起的橫幅或模態視窗)。但總的原則是:版面佈局優先考慮 Flexbox/Grid,只有在它們不適用的情況下再考慮其他方法。 這樣可以避免不必要的複雜度,讓你的 CSS 更容易維護。
問:除了媒體查詢,還有更進階的方式讓元件適應不同環境嗎?
答: 沒錯!容器查詢(Container Queries) 正是為此而生的進階功能。媒體查詢是根據整個視窗大小去改變樣式,而容器查詢則可以根據某個特定容器的大小來調整其內部元素樣式。這代表什麼?代表未來我們可以打造更為模組化的元件:不管這個區塊被放在側欄、小欄位還是全寬區域,都能自我調整呈現最佳狀態。例如,一組卡片列表元件可以在窄容器中自動變成單欄、在寬容器中變成多欄,而無需關心整體視窗的大小。容器查詢在 2025 年已有相當支援度,可以開始研究並運用在新的專案中。除此之外,CSS 還有一些新特性如 :has() 選擇器(可以根據子元素狀態來改變父元素樣式)等,也都讓響應式體驗更具彈性和智慧。持續關注這些新進展,將使你的版面設計能力保持在業界前沿。
希望透過這一連串的講解、範例與問答,能夠澄清你在 HTML 與 CSS 版面設計上可能遇到的疑惑。總結而言,專業的版面來自於紮實的 HTML 結構、巧妙運用 Flexbox 與 Grid 的佈局技巧,以及處處以響應式體驗為念的設計細節。現在,拿起這些工具盡情練習吧!隨著熟練度提高,你將能自信地打造出既美觀又實用的網頁佈局,給不同裝置上的使用者都帶來最適切的體驗。前端的世界瞬息萬變,但不變的是打好基本功後所向披靡的那份底氣。祝你在版面設計的進階之路上乘風破浪,寫出屬於自己的精彩篇章!
