CSS Flexbox 青蛙游戏

关注前端开发博客，回复“加群”

加入我们一起学习，天天进步

导语

在学习CSS中，Flexbox是一个比较实用的CSS 布局属性，但很复杂，有些人可能没法很快掌握，今天我要推荐一个跟这个相关的游戏，在游戏中学习Flexbox，这岂不是一个让人觉得很快乐的事吗？

游戏介绍

来看一下作者对这个游戏的具体介绍吧。

我制作了一个学习CSS Flexbox的游戏，叫Flexbox Froggy。游戏的目标是通过编写CSS代码来帮助青蛙到达他们的百叶窗。看看你是否能打败所有的关卡！

Flexbox Froggy的灵感来自于经典街机游戏Frogger，以及网络扫盲游戏，比如出色的CSS Diner和Erase All Kittens，你可以分别学习CSS选择器和HTML标记。

我之所以选择CSS flexbox，部分原因是它的布局属性使得游戏机制很好。游戏关卡类似于我在Mozilla Thimble教程中特色的 "定位僵尸 "活动，但使用了强大的新flexbox模型而不是绝对定位。

Flexbox也是一个很好的话题，因为初学者可以直接学习这种改进的定位方式，而很多有经验的Web开发者还不熟悉它，终于可以上手了。这也是我自己有段时间一直想学的东西。像CSS Tricks、Codrops和Scotch.io的教程都是顶级的，但很少有交互式的学习体验。

试玩感受

作者从一个简单的青蛙位置跳到对应的荷叶上，根据对应的属性设计不同的排版，从而达到学习Flexbox的目的，这简直太棒了。下面我简单截取一些属性截图。

justify-content:flex-end

justify-content:center

justify-content:space-around

align-items:flex-end

还有属性结合的布局

其它不一一列举了，还是挺有趣的，喜欢可以去看看哈。

最后

关注公众号「前端开发博客」，回复 flexbox，进入游戏学习。

“在看”吗？在看就点一下吧