使用說明
調整 flex-direction、flex-wrap、justify-content、align-items 與 gap，右側的示範項目會立刻依照設定重新排列，比看文件更快理解每個屬性實際做了什麼。當 flex-wrap 不是 nowrap 時才會出現 align-content，因為它在單行版面下沒有作用，避免你複製到無效的設定。
CSS / FRONTEND · 瀏覽器內處理
Flexbox 版面產生
調整 flex 容器屬性並即時看見項目排列變化。
預覽最多 12 個項目。只產生容器屬性，不含個別項目的 flex-grow 設定。
1
2
3
4
5
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
}容器屬性
align-content 只在允許換行且實際換行時才有作用。
flex-wrap
預覽設定
操作步驟
- 設定主軸方向與是否換行。
- 調整主軸與交叉軸的對齊方式與間距。
- 複製 .flex-container 的完整 CSS。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- justify-content 和 align-items 怎麼分？
- justify-content 控制主軸方向的分佈，align-items 控制交叉軸的對齊。主軸方向由 flex-direction 決定：row 時主軸是水平的，column 時主軸變成垂直的，兩個屬性的作用方向也跟著對調。
- align-content 為什麼有時候沒反應？
- align-content 只在有多行時才有作用，也就是 flex-wrap 設為 wrap 或 wrap-reverse 並且項目確實換了行。單行版面請改用 align-items。