⚡全部工具 💻開發者與編碼 📝文字與內容 🎨設計與色彩 🖼️圖片與多媒體 🔢數據與計算 🔒安全與密碼 📄PDF 工具 📐單位與進度轉換

CSS Flexbox & Grid 排版產生器

視覺化調校並預覽 CSS Flexbox 與 Grid 網格佈局，即時查看動畫與複製程式碼。

項目數量

排列方向 (flex-direction)

主軸對齊 (justify-content)

交叉軸對齊 (align-items)

換行屬性 (flex-wrap)

元素間距 (gap) 12px

即時預覽容器

CSS 代碼

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

HTML 代碼

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

使用方式

1 開啟CSS Flexbox & Grid 排版產生器，輸入、貼上或選擇要處理的內容。
2 依需求調整頁面上的選項與格式。
3 確認即時結果，再複製或下載可用的輸出。

適合的使用情境

視覺化調校並預覽 CSS Flexbox 與 Grid 網格佈局，即時查看動畫與複製程式碼。適合日常工作、開發、學習或快速驗證時使用。

隱私與資料處理

工具在瀏覽器中運作；處理敏感資料前，仍請確認瀏覽器與裝置環境可信。

CSS Flexbox 與 Grid 排版產生器：視覺化調整並複製程式碼

這個工具讓你不用背語法，也能用選單把 Flexbox 或 CSS Grid 排版調出來。上方切換「Flexbox 彈性盒」或「CSS Grid 網格」，用加減按鈕設定 1 到 12 個項目，再選擇各項屬性，右側的即時預覽會馬上套用，下方同時產生容器的 CSS 與對應的 HTML 結構，各有一個複製按鈕。預設輸出為 .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; }

Flexbox 模式可以調整 flex-direction（row、row-reverse、column、column-reverse）、justify-content（主軸對齊，含 space-between、space-around、space-evenly）、align-items（交叉軸對齊，含 stretch 與 baseline）以及 flex-wrap。要記得主軸會跟著方向改變：flex-direction 設為 column 時，justify-content 改成控制垂直方向，align-items 則變成控制水平方向。項目超出寬度時，nowrap 會讓它們擠在同一行，wrap 才會換行。

Grid 模式提供常用的欄設定：repeat(2, 1fr) 到 repeat(4, 1fr) 的等寬欄、1fr 2fr 1fr 的中間加寬版型，以及 repeat(auto-fit, minmax(100px, 1fr)) 這種會依容器寬度自動決定欄數的響應式寫法；列可以選 auto、repeat(2, 80px) 或 1fr 1fr。justify-items 與 align-items 決定項目在各自格子裡的水平與垂直位置。兩種模式共用 gap 滑桿（0 到 40px），它同時控制欄與列之間的間距，比幫每個項目加 margin 更乾淨。

產生的程式碼只包含 .container 的排版規則與 .item 的 HTML 結構，項目本身的顏色、大小與內距請依你的設計另外撰寫。簡單的判斷原則是：一維的排列（一排按鈕、導覽列、置中一個元素）用 Flexbox；需要同時控制欄與列的二維版面（卡片牆、儀表板）用 Grid。所有調整都在瀏覽器中即時完成，可以放心反覆嘗試，觀察每個屬性造成的差異。