已更新9月 2026
如何使用Flexbox游乐场
- 设置项目数以大致匹配您的实际布局。
- 翻转下拉菜单 - 方向、对齐内容、对齐项目、换行、间隙 - 并观察响应。
- 学习轴翻转：更改方向并重新测试对齐与对齐 - 核心 Flexbox 见解。
- 将获胜组合复制到您的样式表的容器规则。
Flexbox游乐场是什么？
Flexbox Playground 是 CSS 主要布局系统的交互式沙箱：flex-direction、justify-content、align-items、flex-wrap 和 gap 的下拉菜单，一个项目的实时容器，会在您更改项目时重新排列 - 使 Flexbox 最终点击的因果循环。
Flexbox 的臭名昭著的学习障碍是它的轴系统：justify-content 沿着主轴工作，align-items 沿着横轴工作 - 但当方向从行到列改变时，它会翻转。读这句话很少能学到它；翻转下拉菜单并观看即可。
关于Flexbox游乐场
设置容器属性并观察编号项目服从：方向行或列、从 Flex-Start 到空间均匀的对齐、对齐、换行、间隙大小和项目计数 - 每个组合立即可见。
教导最多的实验：将方向设置为行，在所有六个值中遍历 justify-content，然后将方向切换到列并再次遍历它们 - 轴翻转在一分钟内变得直观；比较并排空间、周围空间和均匀空间（文档图表从未完全涉及的边缘间距差异）；并用十几个项目切换换行，看看 flex 如何处理溢出。
它还可以作为工作参考：重新创建您正在使用的布局，找到修复它的属性组合，并将获胜值传输到您的 CSS。将 div 居中——永恒的问题——是 justify-content: center; align-items: center，可在此处单击两次进行验证。
常见问题解答
justify-content 沿主轴分布（行方向水平），align-items 沿横轴分布（行方向垂直）。将方向切换到列，它们会交换方向 - 在这里尝试一下；这是 Flexbox 的成人礼。
在容器上：display:flex；调整内容：居中；对齐项目：居中。历史上最困难的“center a div”是三个声明——在操场上验证它。
边缘处理：之间在边缘处不留空间，周围为边缘提供内部间距的一半，均匀地使所有间隙相等，包括边缘。一次并肩相见，再也不会混淆。
当物品溢出容器时：nowrap（默认）挤压或溢出它们；换行将额外内容流到新行——响应式网格无媒体查询模式，尤其是带有间隙的模式。
用于一维流程的 Flexbox（导航栏、按钮行、卡片堆栈 — 内容大小和布局）；二维结构的网格（页面支架、对齐的行和列——布局调整内容大小）。真实页面两者都使用，嵌套的。