Flexbox 演练场
调节主轴/交叉轴与项目属性，看图理解弹性布局，切换参数实时预览并复制 CSS，全程在浏览器本地完成。
预览
生成的 CSS
使用说明
通过拖动切换 Flex 容器与子项属性，直观理解主轴、交叉轴对齐与伸缩，实时预览并复制 CSS。纯浏览器本地运行。
- 选择容器的 flex-direction、flex-wrap 与 gap。
- 调节 justify-content 与 align-items 观察对齐变化。
- 为子项设置 flex、align-self 等属性。
- 复制生成的容器与子项 CSS。
常见问题
- 主轴（main axis）是什么？
- 主轴方向由 flex-direction 决定，justify-content 沿主轴对齐。
- flex: 1 是什么含义？
- 等价于 flex-grow:1 flex-shrink:1 flex-basis:0。
- 数据会上传吗？
- 不会，纯浏览器本地运行。