CSS Flexbox 布局生成器
CSS Flexbox 生成器围绕一轴排布：设定 direction、justify-content、align-items、flex-wrap 与 gap，实时预览子项分布并输出 flex 容器与子项的声明，用来做导航两端对齐、水平垂直居中与弹性换行。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 选择主轴方向与是否换行
- 设定 justify 与 align 对齐
- 调整子项 flex 与间距
- 生成容器与子项声明
典型场景
导航栏左右两端对齐排布
卡片内容水平垂直居中
工具条多项弹性换行排列
常见问题
align-items 与 align-content 区别？
前者管单行交叉轴对齐，后者管多行整体分布。
能做居中吗？
配合 justify 与 align 可一步实现水平垂直居中。
和 Grid 生成器怎么选？
单轴弹性排布用 Flex，二维栅格用 Grid。