CSS 排版工具
Flexbox Playground
透過互動式視覺化介面，輕鬆學習與測試 CSS Flexbox 版面配置。
即時預覽、立即產出 CSS 與 HTML，所有操作純前端執行。
Container 設定
flex-direction
justify-content
align-items
flex-wrap
align-content
Gap
Flex Items 編輯
常用版型
即時預覽
1
2
3
display: flex;\nflex-direction: row;\njustify-content: flex-start;\nalign-items: stretch;
功能特色
Container 完整設定
Justify / Align 控制
Flex Wrap 與 Gap
Item 個別屬性編輯
即時互動預覽
產生 CSS 與 HTML
20+ 常用 Presets
一鍵複製程式碼
響應式預覽
新增 / 刪除 Item
復原 / 重做
純前端離線執行
Flexbox 基本教學
CSS Flexbox（彈性盒子）是一種一維的版面配置模型，讓容器內的元素能夠根據可用空間自動調整大小、順序與對齊方式。
Container 屬性
flex-direction— 主軸方向justify-content— 主軸對齊align-items— 交叉軸對齊flex-wrap— 換行模式align-content— 多行對齊gap— 項目間距
Item 屬性
flex-grow— 放大比例flex-shrink— 收縮比例flex-basis— 初始大小order— 排列順序align-self— 個別對齊
常見排版範例
水平置中
垂直置中
導覽列
卡片列表
側邊欄
等寬欄位
常見問題
什麼是 CSS Flexbox？
CSS Flexbox（彈性盒子模型）是 CSS3 提供的一種一維版面配置模式。它讓容器能夠在其內部有效地分配空間、對齊項目，即使項目的尺寸是未知或動態的。Flexbox 非常適合建立響應式設計、導覽列、卡片列表等常見版面。
justify-content 和 align-items 有什麼不同？
justify-content 控制項目在 主軸（flex-direction 方向）上的對齊方式，而 align-items 控制項目在 交叉軸（垂直於主軸的方向）上的對齊。當 flex-direction 為 row 時，justify-content 控制水平對齊，align-items 控制垂直對齊。flex-grow 和 flex-shrink 如何運作？
flex-grow 定義項目在容器有剩餘空間時的放大比例，預設為 0（不放大）。flex-shrink 定義項目在空間不足時的收縮比例，預設為 1（可收縮）。當所有項目的 grow 值總和大於 0 時，剩餘空間會按比例分配。flex-wrap 的作用是什麼？
當容器中的項目總寬度超過容器寬度時，
flex-wrap: wrap 會讓項目自動換行到下一行，而不是強制壓縮在一行內。這在建立響應式卡片列表時非常實用。這個工具是免費的嗎？
是的，完全免費，無需註冊。所有處理都在您的瀏覽器中本地執行 — 不會傳送任何資料到伺服器，您的版面設定絕不外流。
瀏覽器相容性
Chrome 29+
Firefox 28+
Safari 9+
Edge 12+
Opera 17+
iOS Safari 9+
Android 4.4+
IE 11+
隱私說明
此工具完全在您的瀏覽器中執行。您建立的任何版面、Item 設定或樣式都不會傳送到任何伺服器。所有工作都留在您的裝置上。我們不會對這個工具使用 Cookie 或追蹤功能。