CSS 排版方式比較：float、position、flex 與 grid
CSS 排版是網頁設計與前端開發的核心能力之一。理解並熟練各種排版方式，例如：float、flex、grid 等，能協助開發者打造彈性、高效且響應式的畫面布局。透過不同技術的比較與實務應用，能選擇最合適的排版方法解決不同需求。
表格
除了 HTML 表格，display 的表格系列值也能讓任何元素表現得像表格，過去常用來做等高欄位與垂直置中。現在很少當排版主力，但相容性極佳。
| 值 | 說明 |
|---|---|
table | 讓元素表現得像一個表格。 |
table-row | 相當於表格的一列。 |
table-cell | 相當於一格，可做等高欄位與垂直置中。 |
table-layout | 欄寬依內容計算還是依固定比例。 |
詳細用法請見 表格 。
浮動
float 讓元素浮到左側或右側，文字會繞著它排，是早期排版的主要方式。需要另外處理父元素的高度塌陷，新的版面配置建議改用 flex 或 grid。
| 屬性 | 說明 |
|---|---|
float | 讓元素浮動到 left 或 right。 |
clear | 清除浮動，讓後方元素不受前面的浮動影響。 |
詳細用法請見 浮動 。
定位
position 把元素從正常的文件流中拉出來另外擺放，適合浮層、提示框與固定的導覽列。五個值的差別在於以誰為基準、以及會不會脫離文件流。
| 值 | 說明 |
|---|---|
static | 預設值，照正常的文件流擺放。 |
relative | 相對自己原本的位置偏移，仍佔著原位。 |
absolute | 相對最近一個有定位的祖先，脫離文件流。 |
fixed | 相對瀏覽器視窗，捲動時不會跟著移動。 |
sticky | 捲到指定位置後才固定住。 |
詳細用法請見 定位 。
彈性盒子
flex 適合一維排版，把一排元素在水平或垂直方向上排列、對齊與伸縮，導覽列與按鈕群組最常用。
| 屬性 | 說明 |
|---|---|
flex-direction | 主軸方向，決定水平還是垂直排列。 |
flex-wrap | 空間不足時要不要換行。 |
justify-content | 主軸上的對齊與分佈。 |
align-items | 交錯軸上的對齊。 |
order | 調整單一項目的排列順序。 |
詳細用法請見 彈性盒子 。
格線系統
grid 適合二維排版，同時控制欄與列，適合頁面骨架、儀表板與圖片牆。要記的語法較多，但版面越複雜越划算。
| 屬性 | 說明 |
|---|---|
grid-template-columns | 定義欄的數量與寬度。 |
grid-template-rows | 定義列的數量與高度。 |
grid-column、grid-row | 讓項目跨欄或跨列。 |
repeat()、minmax() | 重複軌道與設定上下限，自動響應欄數的關鍵。 |
詳細用法請見 格線系統 。
怎麼選
| 排版方式 | 維度 | 適合的情境 |
|---|---|---|
| 彈性盒子 flex | 一維 | 導覽列、按鈕群組、卡片內部對齊 |
| 格線系統 grid | 二維 | 頁面骨架、儀表板、圖片牆 |
| 定位 position | — | 浮層、提示框、固定導覽列 |
| 浮動 float | — | 文繞圖，或維護舊專案 |
| 表格排版 | — | 等高欄位、垂直置中的相容寫法 |
實務上常是 外層 grid 切骨架、內層 flex 做對齊，浮層另外用 position。
常見問題
現在還需要學 float 嗎？
需要知道它的行為，因為舊專案還很多，文繞圖也仍然只能靠它。但新的版面配置不該再用 float，改用 flex 或 grid 會輕鬆很多。
position 算是排版方式嗎？
它比較像是把元素從正常流程中拉出來另外擺放，適合浮層、提示框、固定的導覽列。整體版面骨架還是交給 flex 或 grid。
一個頁面可以混用嗎？
可以，而且很常見。外層用 grid 切出主要區塊、卡片內部用 flex 對齊、浮層用 position，各自做各自擅長的事。
