大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏

在知乎上随便一艘，CSS难学，就会找到很多关于CSS为什么这么难学的提问？各种回答都有，但是我觉得在游戏中学习CSS是最好的，毕竟人的天性就是爱玩。以以 Flexbox 布局为例。弹性容器的属性justify-content可以有12 个不同的值，我们要怎么记住呢？在Flexbox Froggy这款游戏就可以很快学会并记住。

下面出现的8个游戏，请一定要好好利用，通过这8个游戏，你一定能精通CSS。

Flexbox Defense

它涵盖了 flex 属性align-items、justify-content、flex-direction、align-self和order12 个不同的关卡。尤其是最后 4 个关卡真的很有趣而且有点棘手。

游戏：http ://www.flexboxdefense.com
贡献：https ://github.com/channingallen/tower-defense

Flexbox Froggy

这个游戏也是关于Flexbox 的，它涵盖了更多的 flex 属性：align-items, justify-content, align-content, flex-direction,align-self, flex-wrap,flex-flow和order24 个不同的关卡。

游戏：https ://flexboxfroggy.com
贡献：https ://github.com/thomaspark/flexboxfroggy

Grid Garden

在 28 个不同的关卡中，您可以学习CSS 网格布局。它涵盖以下网格属性：grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end,grid-row, grid-area, order, grid-template-columns,grid-template-rows和grid-template.