过去,我们只介绍了flexbox及其工作原理。 但是实际上将flexbox应用于您的工作流程可能会遇到挑战,因为它是CSS规范中如此复杂的补充。
使用Flexbox Froggy,您可以通过有趣的涉及青蛙和lilypads的网络游戏来学习 flexbox的 所有基础知识 。 我知道这听起来很疯狂,但这确实是一个很棒的Web应用程序。
![主页flexbox froggy](https://i-blog.csdnimg.cn/blog_migrate/2221fd0b64f9c2ad050446daca94dd6d.png)
您从第1级开始,然后逐步学习24个不同的级别,以教授Flexbox定向的许多方面。 通过要求您将一个或两个青蛙沿着一个容器对齐,可以轻松地开始早期的开发工作。 早期课程还包括提示和建议,以帮助您一路走好。
但是,一旦您上了课,就会有10件事真正升温。 您将需要学习如何重新组织容器中的项目 ,如何垂直 组织内容以及如何在不同内容的不同行之间创建等距间距 。
可爱的小青蛙可能会吸引您,但请放心,这是一场艰难的比赛。
但是, 从完全的新手到经验丰富的Web开发人员 ,该游戏适用于所有级别。 早期的课程轻而易举,稍后的课程可以让您在屏幕上弯腰,并排着一束头发。
![flexbox froggy等级18](https://i-blog.csdnimg.cn/blog_migrate/fc06c0d9f62adc04de5d40028a97b033.png)
完整的游戏源代码可在GitHub上免费获得,因此您可以根据需要在本地下载并播放。
此外,webapp还提供多种语言, 提供20种语言,包括英语,法语,德语,意大利语,中文,日语和俄语(以及许多其他语言)。
我承认重新整理青蛙并不会立即使您成为 Flexbox 的高手 。 但是这些课程旨在使您熟悉flexbox语法,以便您在实际场景中工作时会感到更自在。
如果您是任何技能水平的Web开发人员,都应该查看Flexbox Froggy 。 它是完全免费的,玩起来很有趣,而且教育令人惊讶。