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;
}常见问题
意见反馈