通过玩游戏学习 CSS - 没有噩梦

每个前端开发人员的噩梦都是无法将元素定位或对齐到需要的位置，并且当您尝试执行某些操作时，UI 就会开始崩溃。

Flexbox 和 CSS Grid 布局是解决对齐、定位和网页响应相关问题的非常好且简单的方法。

但问题是，我们人类无法记住 Flexbox 和 Grid 的所有属性，不过我们可以通过反复练习来训练自己记住。但这很无聊，我们经常会感到无聊，每次都得去 Google 上搜索文本的对齐方式。

如果有一种有趣的方式掌握 CSS 会怎样呢？如果把它变成一个游戏就好了。大多数开发者在学习教程时都面临同样的问题：教程缺乏趣味性。因此，一些聪明的开发者想出了以下一些游戏来帮助你掌握 CSS。

以下是列表：

1. Flexbox Froggy - 掌握 Flexbox 的游戏
2. Flexbox Defense - 掌握 Flexbox 的游戏
3. CSS Diner - 掌握 CSS 选择器的游戏
4. Flexbox Zombies - 掌握 Flexbox 的游戏（必须尝试）
5. Grid Garden - 掌握 CSS 网格布局的游戏

还有一个游戏可以掌握 CSS Grid，但我没有尝试，因为价格有点高

6. Grid Critters - 掌握 CSS 网格的游戏

这些是一些 CSS 游戏的快速列表，有很多这样的游戏可以帮助你掌握各种技术。
如果我漏掉了什么，请告诉我。

照片由Pankaj Patel在Unsplash上拍摄