首先，就我之前的情况而言，flex布局是比较熟悉的，可以直接写，相比之下grid布局就不是那么熟了，虽然我已经了解它的一些核心功能，但在实际应用时仍然需要通过简单的搜索来查找具体的用法，而对于regex（正则），能盲写比较常用的正则，如果比较复杂，习惯对照着每个表达式的含义一边测试一边验证。后来我接触到这三个相关的教学游戏，通过玩这些游戏并最终全部通关，我发现自己在这些领域的技能有了显著提升。这些游戏不仅让学习过程更加有趣，还有效地增强了我的实战能力，因此，我推荐大家都来试试这几个游戏。
Flexbox Defense
游戏地址
游戏介绍
有点类似保卫萝卜的塔防游戏，你需要使用flex布局将炮台移动到正确的位置，即可消灭敌人，然后通过编写代码来学习和巩固每个flex属性的作用和效果。
第一关示例
第一关截图：
我录制了一个通过第一关的动图，大家可以感受一下：
Grid Garden
游戏地址
游戏介绍
Grid Garden是Codepip创建的一款寓教于乐的在线网页游戏，游戏共有28关，玩家可以通过过关的方式掌握CSS最新标准CSS Grid。通过网格布局构建了一个花园，每个格子可能是花，可能是杂草，你需要通过编写css将水移动到花上面，将毒药移动到杂草上面，来实现花朵的健康成长。
第三关示例
Regex Learn
学习地址
网站介绍
RegexLearn不是一个游戏，而是一个可视化学习正则的网站，它会通过题目和一句话教学引导你使用正则表达式匹配指定的词句，难度梯度把握的很好。
你会发现学习正则比想象的要容易得多，你可以使用本工具轻松学习、练习、测试和分享正则表达式，如果你完成了所有章节的测试，相信你对正则表达式的理解和编写能力都会更上一层楼。
正则表达式-备忘录：
示例
看一个实例（第13章节）：
结语
平时纯学习总是枯燥无味的，但跟着玩游戏的形式来学习是不是很新颖？赶紧玩（学）起来吧，如果你通关了，可以把通关截图留到评论区，哈哈。
