CSS Flexbox 版面產生器

即時調整 Flex 排列方向、換行、間距與對齊，產生可直接複製的 CSS 與 HTML。

flex-direction

row row-reverse column column-reverse

flex-wrap

wrap nowrap wrap-reverse

justify-content align-items

gap · px 項目數量

預覽寬度（%）

輸出格式

CSS HTML

內容僅在此瀏覽器處理，不會上傳或儲存。

工具介紹

安排一組按鈕或控制項時，可先觀察空間不足時如何換行。

設計工具

設定方向、換行、主軸分布及交叉軸對齊，再調整間距、項目數及預覽寬度。切換 CSS／HTML 後可各自複製或下載。

預覽與程式碼使用相同的 Flex 屬性。項目基準寬度為 100 px、最小高度 80 px，可依內容調整。最多 48 個項目、間距 0–80 px；預覽寬度不會寫入匯出 CSS。

不會，預覽寬度只模擬可用空間。匯出包含所選 flex 規則和基本項目尺寸，容器寬度與內容樣式仍由實際頁面決定。

justify-content 調整主軸，align-items 調整交叉軸。row 的主軸是水平，column 則是垂直。要在兩個方向都置中，兩項皆選 center，並讓容器在相應方向有足夠空間可分配。