CSS Flex布局生成器
千寻网 CSS Flexbox 布局生成器，可视化调整 flex-direction、justify-content、align-items、flex-wrap、gap 等参数，实时预览并一键复制 CSS 代码，Flex 布局学习必备。
flex-direction（主轴方向）
justify-content（主轴对齐）
align-items（交叉轴对齐）
flex-wrap（换行）
gap（子元素间距）
12px
子元素
4 个
80px
80px
CSS 代码
子元素数量：4
Flexbox 速查
| 属性 | 作用 | 常用值 |
|---|---|---|
| display | 声明为弹性容器 | flex / inline-flex |
| flex-direction | 主轴方向 | row / column / row-reverse / column-reverse |
| justify-content | 主轴对齐方式 | flex-start / center / space-between / space-around / space-evenly |
| align-items | 交叉轴对齐方式 | stretch / center / flex-start / flex-end / baseline |
| flex-wrap | 是否换行 | nowrap / wrap / wrap-reverse |
| align-content | 多行时交叉轴对齐 | flex-start / center / space-between 等 |
| gap | 子元素之间的间距 | 10px / 1rem 等 |
使用说明
- flex-direction：决定主轴方向，
row为水平，column为垂直。 - justify-content：沿主轴的对齐方式，
space-between是最常用的两端对齐。 - align-items：沿交叉轴的对齐方式，
center是最常用的垂直居中。 - flex-wrap：允许子元素换行，是响应式布局的关键。
- gap：现代浏览器支持的子元素间距，比
margin更方便。 - 「经典居中」：
display:flex; justify-content:center; align-items:center;