✨ Flexbox Layout Generator

Pick the key flex properties and immediately get the matching display:flex CSS with a live preview of one, two and three items.

📐 工作原理與說明

display: flex；flex-direction / flex-wrap / justify-content / align-items / gap 組合

把 flex-direction、wrap、justify-content、align-items、gap 等屬性拼裝為 display:flex 宣告，並以 1 / 2 / 3 個專案即時演示排列效果；用於一維佈局。

flex-direction 主軸方向

justify-content 主軸對齊

align-items 交叉軸對齊

flex-wrap 換行

gap 間距（px）

屬性

常用取值

說明

flex-direction

row / column / row-reverse / column-reverse

主軸方向

justify-content

flex-start / center / flex-end / space-between / space-around / space-evenly

主軸對齊

align-items

stretch / flex-start / center / flex-end / baseline

交叉軸對齊

flex-wrap

nowrap / wrap / wrap-reverse

是否換行

gap

任意長度（如 12px）

專案間距

📚 深度解析：Flexbox 佈局生成器

生成居中橫排

輸入：row、justify-center、align-center。處理：輸出 flex 屬性。輸出：display:flex;… 程式碼與預覽。

居中用哪個？: 主軸 justify、交叉軸 align；兩者都 center 即雙向居中。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
生成的程式碼/圖片能直接用嗎？: 可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

Flexbox 佈局生成器