Flexbox 練習場 - 視覺化操作 Flexbox 並取得 CSS
使用下拉選單更改 flex-direction/justify-content/align-items 等，即時查看結果。
8px
5
preview
1
2
3
4
5
cssCode
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
gap: 8px;
}
使用方法
- 使用下拉選單設定 flex-direction/justify-content 等
- 調整子元素數量
- 右側面板即時預覽
- 複製 CSS 程式碼
常見問題
- 可以操作哪些 Flexbox 屬性？
- 支援 flex-direction、justify-content、align-items、flex-wrap、gap 等主要屬性。
- 可以更改子元素數量嗎？
- 可以。可以添加和刪除子元素。
- 生成的 CSS 可以直接使用嗎？
- 可以。複製程式碼直接貼到 CSS 檔案中使用。
- 資料會傳送至伺服器嗎？
- 所有處理均在瀏覽器中完成，不會將資料傳送至伺服器。
- flex-wrap 與 flex-direction 如何搭配使用？
- 透過 flex-direction 設定主軸，再以 flex-wrap 啟用換行，即可視覺化呈現多行或多欄的排版效果。
相關工具
更新記錄
最後更新：2026-02-21
- 2026-02-21 初次發布