📐 Flexbox 生成器
可视化配置 CSS Flexbox 属性——方向、对齐、换行和间距。生成生产可用的 CSS 代码并实时预览——全部在浏览器中完成。
关于 Flexbox 生成器
本工具可帮助你可视化构建 CSS Flexbox 布局。调整 flex-direction、justify-content、align-items、flex-wrap、align-content 和 gap。预览会即时更新，生成的 CSS 代码可直接粘贴到你的样式表中。
使用方法
- 设置子元素数量。
- 选择主轴方向（行、列或它们的反向）。
- 选择 justify-content 和 align-items 控制主轴和交叉轴对齐方式。
- 可选修改换行方式、多行对齐和间距。
- 点击更新预览，然后点击复制 CSS应用到项目中。
常见问题
justify-content 和 align-items 有什么区别？ justify-content 沿主轴（由 flex-direction 定义）对齐子元素；align-items 沿交叉轴对齐子元素。
align-content 何时生效？ 只有当 flex-wrap 设为 wrap 或 wrap-reverse 且存在多行子元素时，align-content 才会生效。
可以单独设置每个子元素的 flex-grow 吗？ 本工具使用统一样式。如需逐个控制，请手动为每个子元素添加 flex-grow、flex-shrink 和 flex-basis。