CSS Flexbox 生成器
通過圖形介面調整 flex-direction、justify-content、align-items、flex-wrap 和 gap，一邊檢視即時預覽一邊試驗 Flexbox 佈局的免費工具。生成的 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 控制 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 則負責「整個頁面的網格狀佈局」。