CSS Flexbox 視覺產生器

在不同容器尺寸預覽真正的 Flexbox 排版，調整各項目並在本機複製 CSS 與範例 HTML。

01 / 快速開始

從常見排列開始

02 / 容器

調整主軸與對齊

flex-directionflex-wrapjustify-contentalign-itemsalign-content間距（px）

目前只有單行：align-content 不會產生效果。

03 / 項目

調整單一項目

3 / 8

項目數量

flex-growflex-shrinkflex-basisalign-self

數值上限是本工具的編輯範圍，不是 CSS 規格限制。

04 / 瀏覽器預覽

看真正的 Flex 排版

主軸 水平 →交叉軸垂直

預覽寬度（px）預覽高度（px）

1Item 1

2Item 2

3Item 3

寬高只用於測試，不會寫入複製的 CSS；示例卡片外觀也不會複製。請用實際內容和容器尺寸重測。

05 / 可複製結果

帶回專案

CSS

.flex-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
  gap: 16px;
}
.flex-layout > .flex-item-1 { flex: 0 1 auto; align-self: auto; }
.flex-layout > .flex-item-2 { flex: 0 1 auto; align-self: auto; }
.flex-layout > .flex-item-3 { flex: 0 1 auto; align-self: auto; }

HTML

<div class="flex-layout">
  <div class="flex-item-1">Item 1</div>
  <div class="flex-item-2">Item 2</div>
  <div class="flex-item-3">Item 3</div>
</div>

HTML 閱讀順序1 · 2 · 3

設定只留在此頁，不上傳、不儲存，也不寫入網址。需要二維版面？使用 CSS Grid。

如何使用這個工具

選擇版面預設，調整容器與項目屬性，再測試預覽尺寸。複製前比對 CSS 與範例 HTML。

不適合用在什麼情況

範例卡片預覽不能證明實際內容放得下；預覽尺寸不會建立斷點。反向排列只改變視覺順序，請在專案中檢查 HTML 來源、鍵盤順序與窄螢幕。

閱讀實作指南 →