flexboxfroggy

Flexbox Froggy 是一款由 Thomas Park 创建的浏览器教育游戏，以引人入胜的动手实践方式教授 CSS flexbox 布局。游戏设有 24 个难度递增的关卡，玩家需要编写正确的 flexbox CSS 属性——例如 flex-direction、justify-content、align-items、flex-wrap、align-content、flex-flow 和 order——将青蛙角色放置到对应的荷叶上。 每个关卡都会通过简短的说明和可视化预览引入一个新的 flexbox 概念。玩家在编辑器面板中输入 CSS 代码，并能在青蛙移动到位时立即看到反馈。游戏完全在浏览器中运行，访问 flexboxfroggy.com 即可游玩，无需安装。 该项目为开源项目，代码采用 MIT 许可证，图片采用 Creative Commons BY 3.0 许可证。它已被社区贡献者翻译成 50 多种语言，包括中文（简体和繁体）、日语、韩语、西班牙语、法语、德语、俄语、阿拉伯语等。翻译通过 GitHub 仓库进行管理，贡献者可以通过拉取请求添加新语言。 Flexbox Froggy 被广泛引用于前端开发教程、编程训练营和 CSS 学习资源中，是掌握 flexbox 布局的易于上手的入门途径。其源代码是一个静态网站，适合自托管或离线使用。