CSS Flexbox 實驗場
新調整 flex 屬性並即時預覽，可複製 CSS。
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
視覺化 flexbox 產生器，自動為你撰寫 CSS
這個 flexbox 產生器將 CSS 彈性盒子版面配置變成你可以直觀看到的東西。無需猜測 justify-content 或 align-items 會產生什麼效果——只需在帶標籤的控制項上切換每個屬性，即時預覽會立即重新排列，然後複製簡潔的正式環境就緒程式碼。完全在瀏覽器中執行，無需註冊，不上傳任何資料。
這是一個真正的 flexbox 實驗場：包含可編輯子元素的真實 flex 容器、完整的容器和每個元素的控制項、巢狀容器、可調整大小的響應式預覽以及可分享的網址。無論你是在學習 flexbox，還是快速建構導覽列、卡片列或置中的 Hero 區域，都能在幾秒內獲得精確的版面配置——以及對應的 CSS、Tailwind 或 Bootstrap 程式碼。
每個容器屬性，搭配即時預覽
依照規範的方式控制容器。設定 flex-direction（row、row-reverse、column、column-reverse）選擇主軸，justify-content 在主軸上分布元素，align-items 在交叉軸上對齊元素。開啟 flex-wrap 讓元素換行，使用 align-content 分布換行後的多行，並分別調整 列間距和欄間距的值。
內建的軸向圖例會在你更改 flex-direction 時，即時顯示哪個方向是主軸、哪個是交叉軸，讓 justify-content 和 align-items 之間的關係一目瞭然。這是一份透過動手實踐來學習的 flexbox 速查表。
每元素控制：grow、shrink、basis、order 和 align-self
大多數產生器止步於容器。這個工具允許你點擊預覽中的任意元素並單獨編輯：設定 flex-grow、flex-shrink 和 flex-basis（即 flex 簡寫），覆蓋其 align-self，更改 order 以在不修改 HTML 的情況下重新定位元素。新增或刪除元素，觀察空間如何重新分配。
這讓建構真實版面配置模式變得簡單——固定寬度的側邊欄搭配彈性主欄（flex: 0 0 240px 與 flex: 1）、單個置中元素，或使用 margin-left: auto 將頁尾連結推到最右端。
巢狀 Flexbox 與響應式預覽
真實版面配置會巢狀。任何元素都可以成為自己的 巢狀 flex 容器，擁有獨立的方向、justify 和 align 設定——這正是巢狀 flexbox 產生器所需要的，用於建構包含標題列在內容上方的卡片，或工具列巢狀工具列。產生的程式碼也包含巢狀規則。
由於 flexbox 的核心是響應式行為，預覽框是可調整大小的：拖曳控制點或選擇手機 / 平板 / 桌面寬度預設值，觀察元素在每個尺寸下如何換行和重新對齊。這是發布前確認響應式 flexbox 版面配置效果的最快方式。
複製為 CSS、Tailwind 或 Bootstrap——與其他工具的比較
切換輸出索引標籤以獲取專案所需的格式。CSS 提供使用 flex 簡寫的簡潔 .container 和每元素規則。Tailwind 將工具類別——flex、flex-col、justify-between、items-center、gap-4、flex-1、order-2——寫入可直接貼上的 HTML 片段。Bootstrap 輸出等效的 d-flex 工具類別。只輸出你實際更改過的屬性，確保程式碼精簡可讀。
Flexbox.help 等其他視覺化產生器只提供容器屬性，跳過了每元素控制項和巢狀容器。Tailwind 線上實驗場不產生原生 CSS。這個工具支援三種輸出格式，處理巢狀，並在載入後可離線使用——無需帳戶，免費使用，資料不離開你的瀏覽器。
Frequently asked questions
CSS 中的 Flexbox 是什麼？為什麼使用它？
Flexbox（CSS 彈性盒子版面配置）是一種一維版面配置模型，用於在單行或單欄中排列元素並在它們之間分配空間。只需在父元素上添加一行——display: flex——其子元素就會變成 flex 項目，無需浮動或手動設定外邊距即可對齊、分布和調整大小。它被廣泛使用是因為它簡化了常見任務：置中、等高欄、導覽列、卡片列以及各種之前很難實現的版面配置。
如何使用 flexbox？
在容器元素上新增 display: flex，然後使用容器屬性控制子元素——flex-direction（row 或 column）、justify-content（沿主軸的間距）、align-items（交叉軸上的對齊）、flex-wrap 和 gap。例如，.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } 將 logo 和連結排列成一行，垂直置中，分布在兩端。
如何用 flexbox 置中一個 div？
將父元素設為 flex 容器，並在兩個軸上置中：.parent { display: flex; justify-content: center; align-items: center; } ——這會將子元素精確放置在水平和垂直的正中央。給父元素設定一個高度（例如 min-height: 100vh 用於全螢幕置中）。這是完美置中單個元素的最簡潔方式。
justify-content 和 align-items 有什麼差異？
justify-content 沿主軸定位元素，align-items 沿交叉軸定位元素，而主軸由 flex-direction 決定。在預設的 flex-direction: row 下，justify-content 水平分布元素，align-items 垂直對齊元素。切換到 flex-direction: column，兩者互換作用。工具中的即時軸向圖例會在你更改方向時顯示各軸的對應關係。
flex-grow、flex-shrink 和 flex-basis 是什麼？
這是決定 flex 項目尺寸的三個每元素屬性，通常組合寫成 flex 簡寫。flex-basis 是分配剩餘空間前的初始尺寸。flex-grow 控制元素擴展以填充剩餘空間的比例（0 = 不擴展，1 = 佔一份）。flex-shrink 控制空間不足時元素收縮的比例。常用的 flex: 1 表示所有元素平均增長。
如何讓 flex 元素換行？
在容器上設定 flex-wrap: wrap，這樣放不下的元素會換到新行而不是溢出或壓縮。預設 flex-wrap 是 nowrap，強制所有內容在一行顯示。開啟換行後，給元素設定 flex-basis（如 flex: 1 1 200px）讓每行整齊填滿，並使用 align-content 分布產生的多行。
這個 flexbox 產生器免費且私密嗎？
免費，無需註冊。整個實驗場在你的瀏覽器中執行——你的版面配置、產生的 CSS 和分享連結都在你的裝置上建構，從不上傳到伺服器。頁面載入後可加入書籤並離線使用。無需建立帳戶，設定的版面配置數量沒有限制。
Related tools
檢視所有工具
新 顏色混合器
以任意比例混合兩種顏色，並複製結果或任一階段色。
新 圖片取色器
從圖片中挑選任意顏色，並擷取主要色盤為 HEX、RGB 和 HSL。
新 Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
新 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
選色器與轉換器
選取顏色並在 HEX、RGB、HSL 與 OKLCH 之間轉換。
新 色彩對比度檢查器
檢查文字與背景顏色之間的 WCAG AA/AAA 對比度。