学习CSS Flexbox,玩Flexbox 青蛙游戏

前端开发学习    11-03 05:16

导语

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

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

学习CSS Flexbox,玩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

学习CSS Flexbox,玩Flexbox 青蛙游戏

justify-content:center

学习CSS Flexbox,玩Flexbox 青蛙游戏

justify-content:space-around

学习CSS Flexbox,玩Flexbox 青蛙游戏

align-items:flex-end

学习CSS Flexbox,玩Flexbox 青蛙游戏

还有属性结合的布局

学习CSS Flexbox,玩Flexbox 青蛙游戏

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

电竞

网站地图