Flexbox 佈局遊樂場
免費線上 Flexbox 佈局遊樂場。切換 flex-direction、justify-content、align-items、flex-wrap，即時看盒子重排，再複製 CSS。
Flexbox 佈局遊樂場
免費線上 Flexbox 佈局遊樂場。切換 flex-direction、justify-content、align-items、flex-wrap，即時看盒子重排，再複製 CSS。
關於 CSS flexbox
Flexbox 在做什麼
Flexbox 把一組盒子沿單一方向排開，並在它們之間分配剩餘空間。在容器設 display: flex，它的直接子元素就成為 flex 子項，排成一列（或一欄），能一起伸縮與對齊。本工具把每個屬性都做成按鈕，讓你立刻看見效果。
主軸與交叉軸
flex-direction 決定主軸：row 是由左到右，column 是由上到下。justify-content 沿主軸對齊子項，align-items 則沿垂直的交叉軸對齊。一旦知道某個屬性作用在哪條軸上，justify-content 和 align-items 就不再混淆。
常見問題
關於這個主題的常見疑問與實用解答。
justify-content 和 align-items 有什麼差別？
justify-content 沿主軸（由 flex-direction 決定的方向）對齊子項；align-items 沿交叉軸（與主軸垂直）對齊。在這裡把 flex-direction 在 row 與 column 間切換，看哪一個會移動盒子。
flex: 0 1 auto 是什麼意思？
flex 是 flex-grow、flex-shrink、flex-basis 依序的簡寫。0 1 auto 表示子項不放大、空間不足時可縮小、初始大小取內容尺寸。選一個盒子調這三個值，就能在生成的 CSS 看到這個簡寫。
我的資料會被傳送到伺服器嗎？
不會。所有計算完全在你的瀏覽器中執行，你輸入的任何內容都不會離開你的裝置。