CSS Flexbox 生成器
可视化构建 CSS Flexbox 布局，配置弹性方向、换行、justify-content、align-items 等属性，实时预览。免费在线工具。
使用方法
- 调整 flex-direction 设置主轴方向：row（水平）或 column（垂直）。
- 设置 flex-wrap 允许子项换行到多行。
- 配置 justify-content 控制主轴上的间距。
- 设置 align-items 控制交叉轴上的对齐方式。
- 调整 align-content 控制多行换行行为。
- 更改 间距 设置子项之间的沟槽。
- 使用子项数量增减预览框，观察响应效果。
- 点击复制复制生成的
.container { … }规则。
理解生成的 CSS
生成器输出一条包含七个属性的 .container 规则：
display: flex、flex-direction、flex-wrap、
justify-content、align-items、align-content 和 gap。
粘贴到样式表后，将 .container 改为你自己的类名即可。
Flexbox 与 Grid 的区别
一维布局（沿单行或单列排列子项）用 Flexbox；需要同时控制行和列的二维布局用 CSS Grid。 实践中，Flexbox 擅长组件级布局（导航、按钮组、表单行）， Grid 更适合页面级结构。
FAQ
什么是 CSS Flexbox？
CSS Flexbox（弹性盒布局）是一种一维布局模型，沿单轴（行或列）分配空间。适用于导航栏、工具栏、卡片行、居中元素以及任何需要沿单一方向灵活排列子项的 UI。
justify-content 和 align-items 有什么区别？
justify-content 控制主轴（由 flex-direction 定义的方向）上的对齐方式；align-items 控制交叉轴（垂直于主轴）上的对齐方式。对于行方向的 Flex 容器：justify-content 控制水平对齐，align-items 控制垂直对齐。
什么时候应该使用 flex-wrap？
默认情况下 flex-wrap 为 nowrap——所有子项保持在一行，必要时会收缩。设置 flex-wrap: wrap 可让子项无法容纳时换行。适合响应式卡片网格或标签列表等在小屏幕上需要自动换行的场景。
align-content 的作用是什么？
align-content 控制多行 Flex 子项沿交叉轴的分布方式。仅在存在多行时（flex-wrap 设为 wrap 或 wrap-reverse）有效。若只有一行，该属性无明显效果。
Flexbox 中的 gap 属性是什么？
gap（row-gap 和 column-gap 的简写）设置 Flex 子项之间的间距，不会给容器外边缘添加 margin。该属性最初只适用于 Grid，现已在所有现代浏览器中完全支持 Flexbox。