Flexbox 編輯器
免費線上 Flexbox 版面配置編輯器，視覺化即時預覽
Flexbox 屬性參考
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。gap: 項目之間的間距。
如何使用 Flexbox 編輯器
使用控制項調整 flex 容器屬性。預覽即時顯示項目的排列方式。新增或移除項目以測試不同設定。複製產生的 CSS 用於你的專案。
▶justify-content 和 align-items 有什麼區別？
justify-content 控制沿主軸的對齊（行方向為水平，列方向為垂直）。align-items 控制沿交叉軸的對齊（與主軸垂直）。
▶如何用 Flexbox 置中元素？
將父元素設定為 display: flex; justify-content: center; align-items: center; 即可將子元素水平和垂直置中。
▶flex-wrap 有什麼作用？
預設情況下，flex 項目嘗試放在一行（nowrap）。設定 flex-wrap: wrap 允許項目在空間不足時換行到下一行。