Flexbox 生成器
視覺化調整 Flexbox 佈局並生成 CSS 代碼。
使用說明
- •選擇容器方向（行、列、行反向、列反向）
- •選擇換行屬性（nowrap、wrap、wrap-reverse）
- •調整 justify-content 屬性（flex-start、center、space-between 等）
- •調整 align-items 屬性（stretch、center、flex-start 等）
- •CSS 代碼會自動在預覽區域生成
- •點擊「複製」將 CSS 代碼複製到剪貼簿
1
2
3
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
}常見問題
意見反饋