↔️

免費CSS Flexbox 產生器

在即時專案上嘗試 flex 方向、換行、主軸對齊和交叉軸對齊 — 並複製 CSS。

在瀏覽器中執行無需註冊，無彈出式視窗無需登入永久免費

載入後可離線使用

一個視覺化 flexbox 練習場：設定方向、換行、justify-content、align-items 和間隙，更改專案數，並點選專案為其設定 flex-grow。CSS 即時更新，可直接複製。

預設

flex-direction

flex-wrap

justify-content

align-items

間隙: 12px專案: 4預覽高度: 176px

提示：點選預覽中的專案以在其上切換 flex-grow: 1。

即時預覽

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  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>

🔒 一切都在瀏覽器中執行 — 不會上傳任何內容。

工作原理

互動式 flexbox 練習場：切換 flex-direction、wrap、justify-content 和 align-items，觀察最多 10 個即時專案即時重新排列。點選任意專案為其設定 flex-grow: 1，看看它如何佔據空間。CSS 即時更新，可直接複製到你的專案中。

一切都在你的瀏覽器中執行——不會上傳任何內容。