FLEXBOX FROGGY
用青蛙跳格子来练CSS弹性布局,比啃文档有意思多了,偶尔抽风打不开
立即访问
能用,但别指望它帮你真正学会flexbox。我偶然发现FLEXBOXFROGGY这个游戏,用了大概几个月,断断续续的。
打开速度还行,没怎么等,但每个关卡跑起来明显慢,页面反应有延迟,尤其后面几关,点完代码要等一小会儿青蛙才跳,体验挺打折扣的。
优点的话,创意不错,把flex属性对应到青蛙跳到荷叶上,视觉上直观。早期关卡比如justify-content、align-items,确实能让你快速理解主轴和交叉轴的概念。
但也就这样了。缺点算明显。它只覆盖了最基础的几个属性,像flex-wrap、align-content这些稍微进阶的,关卡很少,一笔带过。
更别提flex-flow、order这些,几乎没怎么练到。另外游戏里没有错误提示,你写错代码青蛙不动,你就得瞎试,试对了也不知道为什么对。我没有仔细看有没有官方文档链接,反正游戏里没看到。
另外,它把flex-direction和flex-wrap拆成独立关卡,但实际项目里经常组合用,游戏里几乎没有这种综合练习。
我学完一轮,感觉只是记住了属性名,真要写页面布局还是得回头翻文档。反正,FLEXBOXFROGGY适合零基础找找感觉,但离“学会”差得远。
速度还拖后腿,慢得让人烦躁。
网站信息
网站名称:Flexbox Froggy - 一个用来学CSS flexbox的游戏