Flex布局生成器

如何使用Flex布局生成器

• 设置容器方向（横／竖）、是否换行
• 调主轴对齐、交叉轴对齐和间距
• 右侧盒子实时反映排列效果
• 复制生成的 display:flex 那组 CSS

Flex布局生成器功能说明

• 可视化配置 flex-direction、justify-content、align-items、gap 等
• 常用居中、两端对齐、等高排列一点即成
• 实时预览，复制即用

注意事项

• 分清 justify-content（主轴）和 align-items（交叉轴），方向变轴也变
• 子项的 flex-grow／shrink 需另行设置
• 老旧浏览器（IE）对 flex 支持差，需兼容时另作处理