🧩 Flexbox 佈局生成器

Flexbox 是現代 CSS 佈局的核心。選擇幾個關鍵屬性，立即得到對應的 display:flex CSS，並看到 1/2/3 三個專案的即時排列效果。

📐 工作原理與說明

本設計工具基於通用設計規範與演算法，純前端處理，資料不上傳。工具名稱：Flexbox 佈局生成器。

flex-direction 主軸方向

justify-content 主軸對齊

align-items 交叉軸對齊

flex-wrap 換行

gap 間距（px）

屬性

常用取值

說明

flex-direction

row / column / row-reverse / column-reverse

主軸方向

justify-content

flex-start / center / flex-end / space-between / space-around / space-evenly

主軸對齊

align-items

stretch / flex-start / center / flex-end / baseline

交叉軸對齊

flex-wrap

nowrap / wrap / wrap-reverse

是否換行

gap

任意長度（如 12px）

專案間距

📚 深度解析：Flexbox 佈局生成器

核心屬性

父容器 display:flex；justify-content 控制主軸（橫排時左右）對齊，align-items 控制交叉軸（上下）對齊。flex-direction: column 切換為縱向排列。

垂直水平居中

display:flex; justify-content:center; align-items:center; 是經典的「子項絕對居中」寫法，比老式 margin:auto 更可靠。

換行

flex-wrap: wrap 讓子項空間不足時換行；子項 flex: 1 等分剩餘空間，flex: 0 0 200px 固定 200px 不伸縮。

Flex 和 Grid 怎麼選？: Flex 適合一維（一行或一列）的彈性排列；Grid 適合二維（行列交叉）的複雜網格。兩者常組合：Grid 劃大區，Flex 排區內元素。
為什麼子項被壓扁？: 預設 flex-shrink:1 會收縮。固定尺寸用 flex: 0 0 <尺寸>，或給 min-width:0 允許正確收縮文本。

Flexbox 佈局生成器