通过游戏学习 CSS：Flexbox Froggy 和 Grid Garden

首先使用 Flexbox Froggy 练习沿坐标轴对齐，然后使用 Grid Garden 练习在网格线之间放置元素。完成每个游戏练习后，在你自己的小页面上重现该思路。一个有用的成果是能够解释为什么在布局改变时某个声明仍然有效，而不是仅仅记住某个关卡的答案。

如何通过游戏学习 CSS 并将其应用

此课程结合了两个游戏和三个原创练习。它适合能够阅读简单 CSS 规则并希望获得直观反馈的人。这并非完整的 Web 开发课程：实际的界面还需要可读的内容、响应式设计、键盘访问以及针对不同文本量的测试。

选择与您的问题相关的练习

这些游戏由 Codepip 开发。Cozcade 将每个托管游戏链接到其对应的指南：Flexbox Froggy 及其指南；Grid Garden 及其指南。原始的 Froggy 和 Grid Garden 页面提供了作者自己的版本。请在此处使用键盘进行代码练习。

选择属性前，先分清主轴与交叉轴

Flexbox 具有主轴和交叉轴。flex-direction 设置主方向；justify-content 将元素沿主轴定位，而 align-items 则与交叉轴相关。在普通的从左到右的行中，主轴是水平的。将方向更改为列，主轴则变为垂直。这些定义在 MDN 的 Flexbox 简介 中有详细介绍。

在 Froggy 中尝试声明之前，请先指定元素的移动方向。然后，根据当前主轴为该方向命名。这样可以将错误的答案转化为一个具体的问题：您是否选择了错误的属性、错误的值或错误的轴？

练习 1：将一组元素移动到末尾

在一个容器内创建三个小元素。这是一个原创练习，并非复制游戏关卡或答案。

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

你的目标是将这三个元素一起移向右侧，同时保持顺序不变，也不分别给元素设置外边距。先预测结果，再将 justify-content: flex-end 添加到容器中。

现在将其与 justify-content: space-between 进行比较。第一个选项移动了这组元素；第二个选项则在元素之间分配了可用空间。尝试使用窄容器和宽容器。解释一下，对于三个需要保持紧密排列的按钮，你会选择哪个版本。最终的视觉效果比记住一个数值更重要。

练习 2：保持指令不变，改变坐标轴

重用该容器，添加 flex-direction: column，设置 height: 12rem，并保留 justify-content: flex-end。现在，这些项目聚集在底部。您的声明并没有变成“向右移动”命令：它仍然沿着您更改的主轴生效。

接下来，添加 align-items: flex-start。比较添加前后的排列。按照指定的从左到右方向，项目沿交叉轴向左对齐。移除该声明，再次观察默认的拉伸行为。

请简要解释这两个更改，不要使用“它就生效了”这样的表述。例如，指出坐标轴、空白区域以及正在定位的组。如果您无法解释结果，请将示例简化为两个项目，并一次只更改一个声明。这是游戏中需要养成的习惯。

接下来，区分网格轨道和边界。

Grid 通过行与列两侧的网格线定位元素。五列显式网格共有六条列网格线。从第 3 条列网格线放到第 5 条，元素会跨越两列，而不是三列。网格轨道、单元格与网格线的区别可参阅 MDN 的 Grid 入门说明。

在 Grid Garden 中，先确定起始与结束网格线，再尝试放置元素。如果容易把网格线与中间的空格混淆，可以在自己的页面上画出或标注这些边界。

练习 3：将卡片放在两条网格线之间

创建一个五列的棋盘，并在上面放置一张卡片：

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

在打开页面之前预测卡片会出现在哪里。然后，仅通过改变卡片的列位置，使其占据整个棋盘。在上面的五列显式网格中，grid-column: 1 / 6 会从第一条网格线延伸到最后一条。

最后，将文本更改为更长的句子，并缩小浏览器窗口。放置规则可能仍然正确，但卡片的固定高度显示方式不再适合其内容。解决游戏练习可以学习布局的一部分；构建一个可用的页面还需要检查内容。

将游戏进度作为反馈，而不是掌握的证明。

成功完成练习后，更改一个假设：方向、项目数量、可用宽度或文本长度。在查看结果之前先预测结果。如果你能灵活运用思路并解释变化，那么你学到的就不仅仅是简单的答案了。

返回游戏时，请确保打开的是同一版本和浏览器环境。Cozcade 账户收藏夹用于标记你想重玩的游戏；但这并不保证游戏内部的学习进度会在不同设备间同步。在查看进度时，请避免删除已存储的网站数据，并且仅在特定游戏提供导出功能时才使用。

继续查看对应游戏的攻略

使用Froggy 指南进行轴线和对齐练习，使用Grid Garden 指南进行定位题练习。如果之后你想进行其他类型的练习，请浏览学习游戏。

以上练习是为本文编写的。参考页面已于2026年10月11日审核。我们记录的游戏测试仅涵盖少量桌面交互，并非所有关卡的完成或完整的移动端课程。本文教授一套练习流程；它不授予任何资格证书，也不能替代您自行测试界面。

您可以在 Cozcade 上玩的游戏

Flexbox FroggyGrid Garden