什么是CSS Flexbox 生成器？
免费在线 CSS Flexbox 布局生成器，可视化设置弹性盒子的主轴、交叉轴、对齐方式、排序方向等属性。实时预览，一键复制 CSS 代码。适合快速原型开发和布局调试。
使用场景
- ◆导航栏设计
- ◆卡片布局
- ◆居中对齐
- ◆响应式组件
如何使用？
- 1选择主轴和交叉轴方向
- 2设置对齐方式
- 3实时预览效果
- 4复制 CSS 代码
功能特点
- ✓可视化设置
- ✓实时预览
- ✓属性齐全
- ✓CSS 代码导出
常见问题
Flexbox 适合什么场景？
适合一维布局，如导航栏、按钮组、居中对齐等。
和 Grid 应该用哪个？
一维布局用 Flexbox，二维布局用 Grid，两者经常搭配使用。
什么时候用 Flexbox，什么时候用 Grid？
一维布局（行或列）用 Flexbox，二维布局（行和列）用 Grid。两者经常搭配使用。
justify-content 和 align-items 有什么区别？
justify-content 沿主轴对齐，align-items 沿交叉轴对齐。主轴方向由 flex-direction 决定。
flex-wrap 兼容所有浏览器吗？
兼容。所有现代浏览器和 IE11 都支持 flex-wrap，允许项目换行到下一行。
flex-grow 和 flex-shrink 有什么区别？
flex-grow 控制有额外空间时项目如何增长，flex-shrink 控制空间紧张时如何收缩。