開發者 / CSS版面配置

Flexbox Playground：容器與項目的CSS控制項

試用Flex方向、換行、分散對齊、排列對齊與間距，再調整每個項目的伸展、縮減、基準尺寸、順序與對齊方式。查看版面配置變化並複製CSS。

Flexbox Playground：容器與項目的CSS控制項: 顯示可即時編輯項目屬性的Flex容器，並在每個控制項旁提供簡短說明。預覽區的高度固定，方便看見交叉軸上的效果。如需共用列與欄軌道的網格版面配置，請使用CSS Grid產生器。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類
開發者工具
使用次數
在瀏覽器中
費用
免費・免註冊
可用狀態
可立即使用
Flexbox 版面配置展示台本機處理

全程在瀏覽器中執行

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

列或欄請使用Flexbox。當列和欄都需要共用軌道時，請使用CSS Grid。 開啟CSS Grid 產生器

已選取項目1

Flex版面配置模型

W3C CSS Flexible Box Layout Module Level 1：https://www.w3.org/TR/css-flexbox-1/。可用空間會沿主軸，依照flex成長與縮減權重分配。

對齊與無障礙

MDN flexbox基本概念：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox。交叉軸垂直於主軸；視覺上的重新排序不會改變文件順序。

使用方式

  1. 設定容器的方向、換行與對齊方式。
  2. 點選項目，變更其個別尺寸與對齊設定。
  3. 新增或移除項目、查看版面配置，並複製產生的CSS。

隱私與限制

版面配置設定會在您的瀏覽器中於本機處理。

相關工具

CSS 網格裁切路徑CSS格式化工具

常見問題

為什麼align-content有時沒有作用？

它會分配Flex線。必須啟用換行、產生多條Flex線，且交叉軸上有多餘空間，才會看見效果。

order會改變螢幕閱讀器的順序嗎？

不會。它只會變更視覺順序，文件閱讀順序與鍵盤操作順序仍維持不變。請保持合理的文件順序。

什麼時候應該改用Grid？

當列與欄應共用軌道時，請使用Grid。如果主要是沿著單一軸向排列項目，Flexbox會更實用。

免費工具・使用在瀏覽器中次・免註冊