Flexbox 遊樂場
在即時項目上實驗 CSS Flexbox 屬性，並複製產生的佈局 CSS。
預覽
點擊項目以進行編輯
產生的 CSS
—
所有處理都在你的瀏覽器中執行 — 不會上傳任何內容。
容器
12px
項目
0
選取的項目
關於 Flexbox 遊樂場
Flexbox 練習場是一個實作 CSS flexbox 的動手沙盒。設定容器屬性——flex-direction、flex-wrap、justify-content、align-items、align-content 與 gap——並觀察最多 12 個即時項目在你調整每個值時於預覽中重新排列。這是內化每個屬性實際作用最快的方式。
項目可以個別編輯：點選一個項目來選取它，並調整其 flex-grow、flex-shrink、flex-basis、align-self 與 order。看到一個項目膨脹以吞掉多餘空間、而其他項目仍保持自身寬度，比任何圖解都能更快教會你 flex 的尺寸模型。
練習場會為容器以及任何具有非預設設定的項目產生乾淨的 CSS——直接複製到你的樣式表中即可。一切都在瀏覽器中執行，不會上傳任何資料，重設按鈕可讓你回到乾淨的起點。
如何使用 Flexbox 遊樂場
- 設定容器的 flex-direction、wrap、justify-content、align-items、align-content 與 gap。
- 新增或移除項目——2 到 12 個之間——來對應你實際的元件。
- 點選一個項目並調整其 grow、shrink、basis、align-self 與 order。
- 觀察即時預覽隨每次變更而更新。
- 複製產生的 CSS 並貼到你的專案中。
常見問題
flex-grow 分配剩餘空間：grow 值為 2 的項目會獲得 grow 值為 1 者兩倍的額外空間。flex-shrink 則在空間不足時反向運作。兩者都是同層項目之間的比例，而非絕對尺寸。
align-items 是在交叉軸上、於各自所在行內定位項目。align-content 則是在容器內為多條換行後的行分配間距——只有在 flex-wrap 產生超過一行時才有可見效果。
每個 flex 項目預設 order 為 0；項目會依 order 由小到大排列。改變一個項目的 order 只會改變其視覺位置而不影響 HTML——DOM 順序（因此也是螢幕閱讀器的朗讀順序）維持不變。
會的。產生的 CSS 涵蓋容器規則，以及為每個 grow、shrink、basis、align-self 或 order 與預設值不同的項目所設的選擇器，讓你可以貼上一份完整可運作的版面。
是的——免費、無需註冊，完全在用戶端執行。你的實驗內容永遠不會離開瀏覽器分頁。
熱門搜尋
flexbox 遊樂場
css flexbox 產生器
flex 容器產生器
justify-content align-items 工具
css flex 佈局產生器
flexbox 視覺化工具
flexbox 程式碼產生器
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。