📐 Flexbox生成器 — CSS弹性布局
可视化调整Flexbox属性，实时预览并生成CSS代码。
1
2
3
Flexbox属性说明
flex-direction: 主轴方向（row横排/column竖排）。justify-content: 主轴对齐（居中/两端/均分）。align-items: 交叉轴对齐。flex-wrap: 是否换行。
Flexbox和Grid有什么区别？
Flexbox是一维布局（一次控制一个方向），Grid是二维布局（同时控制行列）。简单的横向或纵向排列用Flexbox，复杂的网格布局用Grid。
📘 使用说明
- 调整容器的flex属性选项
- 在预览区实时查看布局效果
- 增减子项数量测试换行表现
- 复制生成的CSS代码
❓ 常见问题
Q: justify-content 和 align-items 有什么区别？
A: justify-content 控制主轴方向的对齐，align-items 控制交叉轴方向的对齐。当 flex-direction 是 row 时主轴是水平的；改成 column 后两者的作用方向就互换了，这是最容易搞混的地方。
Q: flex: 1 是什么意思？
A: 它是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，效果是让该子项等分剩余空间。多个子项都写 flex: 1 就会平均分配容器宽度。
Q: Flexbox 和 Grid 该用哪个？
A: Flexbox 擅长一维布局（一行或一列内的排列与对齐），Grid 擅长二维布局（行列同时控制）。导航栏、按钮组用 Flex，整页框架和卡片矩阵用 Grid 更合适。
