css flexbox模型_通过Flexbox Froggy游戏自学CSS Flexbox

过去，我们只介绍了flexbox及其工作原理。 但是实际上将flexbox应用于您的工作流程可能会遇到挑战，因为它是CSS规范中如此复杂的补充。

使用Flexbox Froggy，您可以通过有趣的涉及青蛙和lilypads的网络游戏来学习 flexbox的 所有基础知识 。 我知道这听起来很疯狂，但这确实是一个很棒的Web应用程序。

您从第1级开始，然后逐步学习24个不同的级别，以教授Flexbox定向的许多方面。 通过要求您将一个或两个青蛙沿着一个容器对齐，可以轻松地开始早期的开发工作。 早期课程还包括提示和建议，以帮助您一路走好。

但是，一旦您上了课，就会有10件事真正升温。 您将需要学习如何重新组织容器中的项目 ，如何垂直 组织内容以及如何在不同内容的不同行之间创建等距间距 。

可爱的小青蛙可能会吸引您，但请放心，这是一场艰难的比赛。

但是， 从完全的新手到经验丰富的Web开发人员 ，该游戏适用于所有级别。 早期的课程轻而易举，稍后的课程可以让您在屏幕上弯腰，并排着一束头发。

完整的游戏源代码可在GitHub上免费获得，因此您可以根据需要在本地下载并播放。

此外，webapp还提供多种语言， 提供20种语言，包括英语，法语，德语，意大利语，中文，日语和俄语（以及许多其他语言）。

我承认重新整理青蛙并不会立即使您成为 Flexbox 的高手 。 但是这些课程旨在使您熟悉flexbox语法，以便您在实际场景中工作时会感到更自在。

如果您是任何技能水平的Web开发人员，都应该查看Flexbox Froggy 。 它是完全免费的，玩起来很有趣，而且教育令人惊讶。

翻译自: https://www.hongkiat.com/blog/flexbox-froggy/