CSS Flexbox 互動練習場

即時實驗 CSS Flexbox 屬性並查看視覺化結果。

flex-direction
justify-content
align-items
flex-wrap
gap: 8px
子元素數量: 4
預覽
1
2
3
4
CSS 程式碼
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

如何使用

使用下拉選單變更 flex-direction、justify-content、align-items 和 flex-wrap。調整 gap 滑桿和子元素數量。觀察彩色方塊如何隨著屬性變更而在預覽區重新排列。取得想要的佈局後，複製 CSS 程式碼即可使用。

常見問題

相關工具

色碼轉換器色彩調色盤產生器漸層產生器Box Shadow 產生器