CSS Flexbox 生成器

通過圖形介面調整 flex-direction、justify-content、align-items、flex-wrap 和 gap，一邊檢視即時預覽一邊試驗 Flexbox 佈局的免費工具。生成的 CSS 程式碼可一鍵複製。

最後更新: 2026-09-20

邊動手邊搭 Flexbox 版面

Flexbox 是沿著一條軸線排布元素的版面之法。本工具讓您在畫面上切換 flex-direction、justify-content、align-items、flex-wrap 與 gap，邊改邊看結果，並把寫成的 CSS 直接複製出去。

在 Flexbox 上栽跟頭，幾乎都栽在「justify-content 與 align-items 各朝哪個方向使勁」這一點上。 前者管主軸上的排布，後者管交叉軸上的排布。棘手之處在於：flex-direction 由 row 改作 column 的那一刻，這兩條軸便對調了。 元素並排時管水平方向的 justify-content，一旦改為縱向堆疊，管的便成了垂直方向。多數「怎麼也居不了中」的抱怨，不過是沒留意該改的屬性已經換了一個罷了。

使用方法

從預設起步置中、兩端對齊、縱向堆疊等常用樣式都已備好。
切換 flex-direction 在 row 與 column 之間來回，軸的對調便看得一清二楚。
試一試對齊的屬性依次改動 justify-content 與 align-items，確認各自如何使勁。
複製產生的 CSS 排布中意之後，便可原樣貼進您的程式。

用好本工具的小技巧

justify-content 用於「主軸」方向的對齊，align-items 用於「交叉軸」方向的對齊。將 flex-direction 設為 column 後主軸變為縱向，這兩個屬性的視覺效果會互換。
「居中對齊」預設組合了 justify-content: center 與 align-items: center，是用 Flexbox 實現水平垂直雙向居中最常見的寫法。
gap 屬性只在專案之間新增間距，不會影響容器外側的空白（margin）。與 margin 不同，它能讓相鄰專案之間保持均勻的間隙而不影響邊緣留白。
為單個專案設定 align-self 後，該專案會忽略容器整體的 align-items 設定，適合讓某一個元素單獨呈現不同的對齊方式。
啟用 flex-wrap: wrap 後，超出容器寬度（column 模式下為高度）的專案會自動換到下一行，是響應式卡片佈局中常用的技巧。

這些情境會用到

搭一條導覽列

標誌靠左、選單靠右，正是 justify-content: space-between 的典型用場。

把卡片等距排開

用 gap 便省去了為求間距均勻而抵銷 margin 的那些小把戲。

把元素放在正中

把 justify-content 與 align-items 都設為 center，是最短的路。

學習 Flexbox

改一個值看一眼結果，比讀多少說明都學得快。

Flexbox 的術語

主軸: 元素排布所沿的方向，由 flex-direction 定下。row 時為水平，column 時為垂直。
交叉軸: 與主軸成直角的方向。主軸一對調，它也隨之對調。
justify-content: 管主軸上的排布，提供置中、兩端對齊、均勻分布等。
align-items: 管交叉軸上的排布。在預設的 stretch 之下，子元素會長到滿高。
flex-wrap: 決定放不下的元素是否換行。留作 nowrap 則被壓縮著塞進去。
gap: 元素之間所留的空隙。與 margin 不同，它不會在外緣添出多餘的空隙。

常見問題

justify-content 控制 Flexbox「主軸」方向（由 flex-direction 決定，預設是橫向）的對齊方式，align-items 控制與主軸垂直的「交叉軸」方向的對齊方式。當 flex-direction 為 row 時主軸是橫向，因此 justify-content 負責橫向排列、align-items 負責縱向排列；但改為 flex-direction: column 後主軸變為縱向，這兩個屬性的作用會互換。

當 flex-direction 為 column 時，主軸變為縱向，因此使用 justify-content: center 可以實現縱向居中。若還需要橫向（交叉軸方向）居中，則使用 align-items: center。兩者結合即可在縱向堆疊佈局中同時實現上下左右居中。

Flexbox 的 gap 屬性在 2021 年前後 Chrome 和 Safari 的支援一度落後，但目前主流瀏覽器（Chrome 84+、Safari 14.1+、Firefox 63+）均已支援。如果必須相容非常old的瀏覽器，可以考慮用 margin 作為替代方案。

flex-grow 用於指定容器有多餘空間時專案應擴充套件多少來填補空白，flex-shrink 用於指定容器空間不足以容納所有專案原始大小時專案應收縮多少。兩者都是以專案的基準尺寸（flex-basis）為基礎，決定多餘或不足的空間如何分配。

一般來說，Flexbox 更適合「單一方向（一行或一列）排列的元素組」佈局，例如導航欄或橫向排列的卡片。而 CSS Grid 適合同時控制行與列的二維佈局，例如整個頁面的網格結構。簡單的線性排列選擇 Flexbox，需要複雜的網格狀佈局則選擇 Grid。

閒話 ― Flexbox 如何改變 CSS 佈局的歷史

在 CSS Flexbox（正式名稱為 CSS Flexible Box Layout Module）出現之前，網頁的橫向佈局通常依靠 float 屬性實現。然而 float 原本是為了讓文字環繞圖片而設計的功能，並非用於佈局，因此用它來做佈局需要許多變通手段，其中最著名的就是防止父元素高度塌陷的「clearfix」技巧。

W3C 於 2009 年釋出了 Flexbox 的第一份草案，它專為「一維排列」佈局而設計。過去需要多行 float 相關 CSS 技巧才能實現的效果——如讓元素沿主軸伸縮、均勻分配空間、實現垂直居中——如今只需 justify-content、align-items 等宣告式屬性即可完成。

大約在 2015 年前後，主流瀏覽器完成了對 Flexbox 的實現，它迅速成為實現導航欄、卡片佈局、表單對齊等常見網頁設計模式的標準手段。「終於能用 Flexbox 實現垂直居中」在當時的前端開發者社群中尤其受到歡迎，因為這曾是 CSS 中公認最棘手的問題之一。

如今，Flexbox 與專注於二維佈局的 CSS Grid 各司其職、共同存在：Flexbox 負責「沿單一方向排列的元件內部佈局」，Grid 則負責「整個頁面的網格狀佈局」。

檢視全部趣味知識