可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见 Flex 布局
.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}CSS 布局输出是起始片段。发布前请用真实内容、断点、容器尺寸和浏览器支持情况测试。
Flexbox 生成器可以快速生成一维布局和对齐 CSS。
它适合导航、按钮组、表单行、工具栏、卡片内部和居中布局。
清晰输入
准备好要处理的方向、对齐、换行和间距设置，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
设置 display:flex、align-items:center、justify-content:space-between 生成常见工具栏布局。
假设
用户需要一维排列或组件内部对齐。
限制
复杂二维布局可能更适合 CSS Grid。
先区分主轴和交叉轴
很多对齐问题来自把 justify-content 和 align-items 的方向搞反。
留意换行行为
工具栏、标签列表和按钮组在移动端可能需要 wrap，不应强行挤在一行。
检查间距来源
gap、margin 和 padding 都能制造间距，复制代码前先决定由哪一层负责。
适合一维对齐
导航、按钮组、工具栏、标签和表单行通常用 Flexbox 更直接。
复杂二维布局交给 Grid
如果同时需要控制行和列，Grid 通常比层层嵌套 Flex 更清楚。
移动端不要强行一行
按钮组和筛选项在手机上更适合换行或堆叠，否则文字会挤压。
导航栏
对齐 Logo、菜单和按钮。
按钮组
控制间距和换行。
表单行
排列标签和输入框。
居中布局
快速生成中心对齐。
Flexbox 适合二维网格吗？
更复杂二维布局通常用 Grid 更清晰。
可以设置 gap 吗？
可以按页面选项生成 gap。
代码会上传吗？
不会。生成在浏览器本地完成。
支持响应式断点吗？
基础代码可复制，断点需要项目内添加。
justify-content 和 align-items 为什么容易混？
justify-content 控制主轴，align-items 控制交叉轴。主轴方向会随着 flex-direction 改变。
Flexbox 适合做完整页面网格吗？
可以做简单布局，但复杂卡片网格、行列对齐和响应式列表通常用 CSS Grid 更清晰。
Flexbox 适合二维网格吗？
更复杂二维布局通常用 Grid 更清晰。
可以设置 gap 吗？
可以按页面选项生成 gap。
代码会上传吗？
不会。生成在浏览器本地完成。
支持响应式断点吗？
基础代码可复制，断点需要项目内添加。
justify-content 和 align-items 为什么容易混？
justify-content 控制主轴，align-items 控制交叉轴。主轴方向会随着 flex-direction 改变。
Flexbox 适合做完整页面网格吗？
可以做简单布局，但复杂卡片网格、行列对齐和响应式列表通常用 CSS Grid 更清晰。
推荐流程
Flex 布局流程
先生成 Flexbox，再换算单位和检查颜色。