Flexbox 版面產生器
用視覺化面板設定 flex 容器和每個項目,版面即時預覽,CSS 程式碼一鍵複製。
容器
排列方向
換行
主軸對齊
交叉軸對齊
多行對齊
項目 1
單獨對齊
版面都在你的瀏覽器裡產生,這裡設定的內容不會上傳到 BroBroGo。
常見問題
justify-content 和 align-items 有什麼差別?
justify-content 沿主軸(項目排列的方向)分配項目,align-items 則控制項目在另一條軸上的位置。把方向從 row 改成 column,兩條軸就對調了——justify-content 變成上下排列,align-items 變成左右對齊。
單一項目的控制項怎麼用?
先依編號選取一個項目,再設定它有空間時放大多少、空間不足時縮小多少、初始尺寸(基準)以及它自己的交叉軸對齊方式。順序(order)能讓項目在畫面上提前或往後,而不必更動 HTML。只有你真正改過的項目,才會在 CSS 裡單獨產生一條規則。
換行和 align-content 什麼時候會作用?
不換行時,所有項目都被擠在同一行,會被壓得更窄。開啟換行後,放不下的項目會掉到下一行——這時 align-content 才登場,把多行當成一個整體來分配間距。間距(gap)則不必用外距就能設定項目之間、以及行與行之間的空隙。