学习 CSS 布局最好的方式是动手实践。这两款游戏通过趣味关卡帮你掌握 Flexbox 和 Grid。

Flexbox Froggy

游戏地址：https://flexboxfroggy.com/

游戏介绍

通过帮助青蛙找到荷叶来学习 Flexbox 布局。共 24 关，从简单到复杂逐步深入。

学习内容

  • justify-content - 水平对齐
  • align-items - 垂直对齐
  • flex-direction - 主轴方向
  • flex-wrap - 换行
  • align-content - 多行对齐
  • order - 项目顺序
  • align-self - 单个项目对齐

示例关卡

关卡 1：将青蛙移到右侧

1
2
3
4
#pond {
  display: flex;
  justify-content: flex-end;
}

关卡 12：使用 flex-direction 和 justify-content

1
2
3
4
5
#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

适合人群

  • Flexbox 初学者
  • 需要复习 Flexbox 属性的开发者
  • 喜欢通过游戏学习的人

CSS Grid Garden

游戏地址：https://cssgridgarden.com/

游戏介绍

通过给花园浇水来学习 Grid 布局。共 28 关，涵盖 Grid 的核心概念。

学习内容

  • grid-column-start/end - 列起止位置
  • grid-row-start/end - 行起止位置
  • grid-column - 列简写
  • grid-row - 行简写
  • grid-area - 区域定位
  • grid-template-columns - 定义列
  • grid-template-rows - 定义行
  • grid-template - 模板简写

示例关卡

关卡 1：给第 3 列浇水

1
2
3
4
5
6
7
8
#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 3;
}

关卡 17：使用 grid-area

1
2
3
#water-1 {
  grid-area: 1 / 2 / 4 / 6;
}

适合人群

  • Grid 初学者
  • 想要系统学习 Grid 的开发者
  • 已经掌握 Flexbox，想学习更强大的布局方案

两者对比

特性 Flexbox Grid
布局维度 一维（行或列） 二维（行和列）
适用场景 导航栏、卡片排列 页面整体布局、复杂表格
难度 简单 中等
浏览器支持 更好 较好（IE11 需要前缀）

实战应用

Flexbox 常用场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 导航栏 */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 卡片居中 */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

Grid 常用场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 页面布局 */
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

进阶资源

完成游戏后，可以继续学习：

学习建议

  1. 先玩 Flexbox Froggy：Flexbox 更简单，作为入门
  2. 再玩 Grid Garden：Grid 功能更强大，但也更复杂
  3. 实践结合：游戏通关后，尝试在真实项目中应用
  4. 记录笔记：把常用的属性组合记录下来

其他相似游戏

总结

通过这两款游戏，你可以在轻松愉快的氛围中掌握 CSS 的两大布局利器。建议每天花 10-15 分钟通关几个关卡，循序渐进地提升布局能力。