|学习CSS Flexbox，玩Flexbox 青蛙游戏
【|学习CSS Flexbox，玩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
文章图片
文章图片
还有属性结合的布局
文章图片
文章图片
其它不一一列举了 ， 还是挺有趣的 ， 喜欢可以去看看哈 。最后
