Flexbox Froggy 简介 — 学习使用 CSS 将青蛙移动到荷叶上的谜题

玩法指南

操作方法与目标

操作方法: 在代码输入字段中输入 CSS 属性和值。一旦放置正确，“下一步”将被启用。
目标: 编写 CSS 属性和值，将彩色青蛙放在相同颜色的荷叶上，并前进通过所有 24 个级别。

关于这款游戏

编写代码，
目视检查布置。

“Flexbox Froggy”是一款由 Thomas Park 创建的 CSS Flexbox 学习游戏。每个级别都显示了青蛙和荷叶在池塘中的位置。在代码字段中输入指定的 CSS 属性，并将青蛙放在相同颜色的叶子上以进入下一级别。

书写、移动、匹配

编写 justify-content，
把青蛙带到右边的叶子上。

级别 1 处理 justify-content，它确定水平对齐方式。日语官方解释显示了flex-start、flex-end、center、space- Between、space-around，当输入flex-end时，青蛙移动到池塘的右侧。

游戏内屏幕带有 justify-content: flex-end;在日版 Flexbox Froggy 的第 1 级代码字段中输入，右侧有一只骑在荷叶上的绿色青蛙。 — 游戏画面：输入 justify-content: flex-end;在代码字段中，以及第 1 层，绿色青蛙骑在右侧的荷叶上。

实玩摄影：Detour Playlist 编辑部/制作：Thomas Park/图片：CC BY 3.0

CSS 输入直接反映到池塘位置

在代码字段中输入的内容将反映在右侧池塘中元素的排列中。作者的制作文章解释说，这项工作的目标是编写CSS代码将青蛙运送到荷叶上。

24个级别处理flexbox的主要属性

官方源码包含24个关卡。从justify-content开始，属性将增加到align-items、flex-direction、order、align-self、flex-wrap、flex-flow和align-content。

日语显示和三个难度级别可供选择

官网版支持日文显示。在设置中，您可以选择“初级（带说明）”、“中级（无说明）”和“专家”（删除说明并更改级别顺序）。您还可以切换显示以考虑色觉多样性。

游玩说明

游玩补充说明

规模/难度: 共有24个级别，您可以选择初级（带说明）、中级（不带说明）和专家（更改级别顺序不带说明）。没有固定的时间估计
语言/支持的环境: 支持日语、英语等多种语言。适用于支持 HTML5、CSS 和 JavaScript 的浏览器，以及可以使用键盘进行 CSS 输入的环境。
费用/节省: 官网版免费，不需要账号。将当前级别、输入的答案、已解决的级别和显示设置保存到浏览器的 localStorage。

使用 FlexBOX 移动

写一行CSS，
把青蛙带到树叶上。

免费玩日文官方网页版

官方网页版本、作者制作文章和官方存储库已于2026年7月25日确认。两张图片是编辑部使用官方独立日文版本拍摄的游戏内屏幕。信息来源：Flexbox Froggy 官方网页版（日语）、托马斯·帕克制作的文章、Flexbox Froggy 官方存储库、Flexbox Froggy 代码的 MIT 许可证 Flexbox Froggy 图像的、CC BY 3.0 表示法、知识共享归属3.0

直播信息

关于直播与视频投稿

允许直播允许营利

官方存储库在 MIT 许可下发布代码，并在 CC BY 3.0 下发布图像。在处理游戏图像进行分发、视频发布或货币化时，请显示作品标题、Thomas Park、官方 URL 和 CC BY 3.0 链接，并遵守每个许可的条款。请不要在页面底部显示第三方广告或链接材料，因为它们不符合资格。无法确认专用交付指南。

确认日期：2026年7月25日 · 官方依据：Flexbox Froggy 官方存储库、Flexbox Froggy 代码的 MIT 许可证 Flexbox Froggy 图像的、CC BY 3.0 表示法、知识共享归属3.0

读者评论

《Flexbox Froggy》的评论

分享游玩感想，或告诉其他读者这款游戏值得推荐的地方。

所有语言版本共用评论，评论内容以原文显示，不会自动翻译。

正在加载评论…

Flexbox Froggy 只需一行CSS，青蛙向叶子移动。

操作方法与目标

编写代码，目视检查布置。

编写 justify-content，把青蛙带到右边的叶子上。