快速开始
访问 HeronTool 的“Flexbox (Flex 布局)”工具。在左侧面板设置容器属性，如 display: flex、flex-direction、justify-content、align-items 等，右侧会实时渲染预览。调整子项数量及 flex-grow、flex-shrink、flex-basis 值，观察布局变化。
生成与导出
- 配置容器和子项样式，预览满意后，点击“生成代码”按钮。
- 工具自动生成对应的 CSS 片段，包含
-webkit-前缀兼容旧浏览器。 - 复制代码到你的项目，或直接下载样式文件。
常见问题 (FAQ)
Q: 如何快速实现水平垂直居中？
A: 设置父容器 display: flex、justify-content: center、align-items: center 即可。
Q: 子项宽度不均等怎么办？
A: 调整每个子项的 flex-grow 值，数值越大占据空间越多。
Q: 预览与浏览器实际效果不一致？
A: 检查浏览器是否支持 Flexbox，建议使用最新 Chrome 或 Firefox。工具已生成兼容代码。
文章标签
