Flexbox 操场
可视化调试 CSS Flexbox 属性。
How to Use
- 设置 flex 容器属性：选择排列方向（row、row-reverse、column、column-reverse）和换行行为（nowrap、wrap、wrap-reverse）。操场中以彩色 flex item 实时渲染，直观展示布局变化。
- 配置对齐方式：justify-content 控制主轴上的间距分布（start、center、end、space-between、space-around、space-evenly）；align-items 控制交叉轴上的对齐；启用换行时可用 align-content 控制多行间距。
- 复制生成的 CSS flexbox 规则，包括容器属性和所有弹性项目属性。
Frequently Asked Questions
- space-between、space-around 和 space-evenly 有什么区别？
- space-between 将第一个项目置于起点，最后一个置于终点，各项目间距相等。space-around 在每个项目周围添加相等的间距（边缘处为一半间距）。space-evenly 使任意两个项目之间以及项目与容器边缘之间的间距完全相同。在 Playground 中逐一尝试，直观感受视觉差异。
- 什么时候用 flex-grow，什么时候用 flex-basis？
- flex-basis 在增长或收缩前设置弹性项目的初始尺寸。flex-grow 定义项目应获取多少剩余空间。使用 flex: 1（等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0）让所有项目等宽。使用 flex-basis: 200px 搭配 flex-grow: 1 实现有最小宽度且可扩展的列。
- Flexbox 可以替代浮动布局吗？
- 可以——Flexbox 是浮动布局的现代替代方案，自 IE11 起所有浏览器均已支持。它处理垂直居中、等高列和源码顺序无关布局比浮动优雅得多。结合 CSS Grid，Flexbox 已成为现代 CSS 布局的标准。