CSS Flexbox 是一種一維版面配置模型，透過在父元素上設定 display: flex 來控制，設定後，父元素會有五個容器屬性 —— flex-direction、flex-wrap、justify-content、align-items 和 gap —— 用來決定其直接子元素如何沿著主軸與交叉軸排列。根據 MDN 上關於 CSS 彈性盒子版面模組的說明文件，Flexbox 是專門為了在單一維度上分配空間並對齊內容而設計的，是用於橫列、導覽列、卡片條以及垂直置中面板最直接的解法。與其手動撰寫這五個屬性並猜測最終的幾何結果，你可以開啟 Flexbox 產生器，逐一調整各個控制項，觀察固定五個項目的預覽即時更新，然後把經過驗證的 .container 規則直接複製到你的樣式表中。
Flexbox 對容器實際做了什麼
當你對一個元素套用 display: flex 時，該元素會成為彈性容器，而每個直接子元素則成為彈性項目。瀏覽器會沿著由 flex-direction 定義的主軸，以及由該選擇隱含定義的垂直交叉軸來排列項目。flex-direction 接受 row（預設）、row-reverse、column 和 column-reverse。交叉軸是垂直的方向 —— 對橫列來說是垂直，對直欄來說則是水平 —— 並決定 align-items 如何定位項目。
flex-wrap 控制項目是否被強制放在同一行，或允許換行成多行，可接受 nowrap（預設）、wrap 和 wrap-reverse。justify-content 會沿著主軸分配項目，可使用的值包括 flex-start、flex-end、center、space-between、space-around 或 space-evenly。align-items 則處理交叉軸，可使用 stretch（預設）、flex-start、flex-end、center 或 baseline。這四個屬性加起來已涵蓋絕大多數一維版面的需求，而 gap（或展開寫法 row-gap / column-gap）則能在不使用 margin 技巧的情況下，在項目之間插入統一的間距。
產生器 vs 手寫 CSS：哪個比較好用
手寫 Flexbox 的難處不在語法 —— 而是幾何。你無法預測 space-between 在你的容器寬度下看起來是否合適，無法預測在某個 flex-wrap 設定下項目是否會意外換行，也無法預測你選的 gap 值是否會與你忘了歸零的項目 margin 衝突。產生器透過把每個控制項綁定到即時預覽來消除這種不確定性，所以你看見的結果就是你最終會部署的結果。
Flexbox 產生器 僅限於五個核心容器控制項以及一個固定的預覽結構（單一 .container 中的五個項目），這讓輸出保持確定性，預覽也忠實可靠。它沒有自由形式可輸入樣式的欄位，讓你打出互相矛盾的數值而搞壞檢查器。一旦預覽符合你想要的版面，產生的 CSS 就是你要保留的 CSS。
逐步建立 Flexbox 容器
- 在瀏覽器中開啟 Flexbox 產生器。你會在左側看到五個控制項，右側則是固定五個項目的預覽。
- 選擇 flex-direction。水平導覽列或卡片條選 row，垂直側欄或堆疊表單選 column；若視覺順序應與來源順序相反，則選擇其中一個 reverse 變體。
- 選擇 flex-wrap 值。保持 nowrap 可讓單行即使溢出也不換行；當項目應在容器邊緣重新流動到額外的行時，切換到 wrap；若希望由下往上堆疊的換行版面，則使用 wrap-reverse。
- 沿著主軸選擇 justify-content 值。標頭左邊放 logo、右邊放動作按鈕時使用 space-between；置中的工具列使用 center；若希望每個項目兩側都帶有相等空間，則使用 space-evenly。
- 為交叉軸選擇 align-items 值。預設的 stretch 會填滿交叉軸的尺寸；navbar 中垂直置中的圖示通常選 center；flex-start 或 flex-end 則會把項目推到某一側。
- 輸入 0 到 100 之間的整數像素 gap 值。gap 會沿主軸均勻套用於項目之間，是不依賴項目 margin 就能加上間距最乾淨的做法。
- 檢視五個項目的預覽，確認項目落在你預期的位置。由於預覽是固定的，你看到的任何偏差，就是實際部署時會出現的偏差。
- 閱讀產生的 .container 規則，然後透過複製按鈕複製，或手動選取可見的程式碼並貼到你的樣式表中。
- 在你的 HTML 中，把 class container 加到外層元素上。如果你的專案已經使用不同的 class 名稱，請在儲存前對產生的選擇器執行一次全域尋找取代。
五個容器屬性一覽
| 屬性 | 軸 / 角色 | 常用值 | 典型用途 |
|---|---|---|---|
| flex-direction | 定義主軸 | row, row-reverse, column, column-reverse | 水平導覽列 vs 垂直堆疊 |
| flex-wrap | 控制換行 | nowrap, wrap, wrap-reverse | 單行工具列 vs 響應式卡片列 |
| justify-content | 沿主軸分配項目 | flex-start, flex-end, center, space-between, space-around, space-evenly | 置中、推到邊緣、等距間距 |
| align-items | 沿交叉軸對齊項目 | stretch, flex-start, flex-end, center, baseline | 圖示與文字基線的垂直置中 |
| gap | 項目之間的間距 | 整數像素, 0–100 | 不靠 margin 計算也能維持一致的間距 |
這個表格正好涵蓋了產生器的所有功能 —— 列出的每個控制項都對應到工具上的一個輸入欄位。如需每個值的正式定義，請參閱 MDN 上關於 CSS 彈性盒子版面的參考資料。
把 Flexbox 與 CSS Grid 搭配使用
Flexbox 是一維的；CSS Grid 是二維的。正確的選擇取決於你要把項目排列成單一橫列或直欄（Flexbox），還是要同時排列成橫列與直欄（Grid）。對於包含 logo、導覽連結和 CTA 的頁首來說，使用 Flexbox 搭配 space-between 幾乎總是比等效的 Grid 樣板更簡短、更清楚。至於需要命名區域的真正矩陣版面，則改用 CSS Grid 產生器。
一個實用的經驗法則：卡片、導覽列或表單內部的任何內容，先從 Flexbox 開始；當版面需要交叉的橫列與直欄軌道時，再切換到 Grid。兩者可以組合使用 —— Grid 儲存格中可以放 Flex 容器，Flex 項目也可以作為 Grid 容器 —— 不會發生衝突。如需更深入了解這個決策中的 Grid 面向，請參閱 如何在 CSS 中製作 3x3 格線：實務逐步指南。
在 CSS 中建立 Flexbox 的常見陷阱
最常見的錯誤是把 flex-direction 與視覺閱讀順序視為同一件事。row-reverse 和 column-reverse 只會在視覺上重新排列項目，並不會動到 DOM，這可能會干擾螢幕閱讀器與 tab 鍵順序。只有在視覺順序與來源順序對所有使用者來說都確實應該不同時，才使用 reverse 系列的值。
第二個陷阱是將 margin 間距與 gap 混用。如果你的項目已經帶有左邊或上方 margin，而你又設定了 gap，間距看起來會不均勻，因為 gap 套用於每對項目之間，而 margin 又額外疊加上去。請在你的 reset 中把項目 margin 歸零，然後在容器內部僅依靠 gap 來處理間距。
第三個陷阱是忘了 align-items: stretch（預設值）只有在項目本身未設定交叉軸尺寸時，才會沿交叉軸拉伸項目。如果某個 flex 項目有固定高度，無論容器的 align-items 值是什麼，它都不會被拉伸。請確認預覽反映出你實際部署的項目尺寸，這正是產生器固定五個項目預覽的價值之一 —— 它能在 CSS 離開你的電腦之前，就把這類不相符的問題暴露出來。
驗證並部署產生的 CSS
一旦預覽符合你的預期，就把 .container 規則貼到樣式表，並把該 class 加到外層元素上。在瀏覽器中開啟頁面並縮放視窗大小，以確認在較窄寬度下的換行行為。如果項目在小尺寸下溢出，就把產生器的 wrap 從 nowrap 切換到 wrap 並重新產生，或為項目設定 min-width，讓瀏覽器有穩定的換行點。
對於同時需要把像素長度轉換為 rem 以實現無障礙縮放的專案來說，PX 對 REM 轉換器 與 Flexbox 輸出能自然搭配：版面定案後，再轉換 gap 與任何固定的項目寬度。如果你要比較樣式表的兩個版本，Diff Checker 可以輕鬆確認在兩次提交之間只有新的 .container 規則有變動。
快速參考範例
使用產生器的五個控制項打造一個標準的水平置中且垂直置中的導覽列，當 flex-direction 為 row、flex-wrap 為 nowrap、justify-content 為 space-between、align-items 為 center、gap 為 16 時，看起來會像這樣：.container 規則變成 display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 16px;。在 <header> 上加上 class="container" 並放入三個子元素，版面就完成了 —— 不需要 float、不需要 inline-block、也不需要 margin 算術。這條規則就是 Flexbox 存在的唯一理由，而產生器就是不用反覆質疑數值就能最快產出它的方式。
延伸閱讀：如何在 C++ 中使用 ASCII 碼處理字元。
延伸閱讀：線上圓角產生器：複製最短的 CSS 宣告。