Flex 属性记不住？用青蛙过河游戏玩半小时就上手

flex-direction、justify-content、align-items 这几个属性，看文档每个都懂，一写布局就不知道该调哪个。Flexbox Froggy 把它做成二十来关小游戏：用属性把青蛙挪到对应荷叶上，写错了立刻看到画面变样，反馈比读文章快得多。

它解决什么问题

弹性布局属性名太像，justify 和 align 各管哪个方向，看一遍忘一遍。

照教程抄代码能出效果，自己从空白文件开始又不知道先写哪一句。

核心能力

通关只是起点，真正上手要靠改真页面

别一关一关死磕。卡住时先把该关支持的属性都试一遍，看画面怎么变，这比回头翻文档快，因为反馈是即时的。全部通关后建议再走一遍，把每关的答案自己写出来而不看提示，确认自己记住的是思路，而不是上一轮摸出来的那几个数字。关卡里的提示可以先用着，熟练之后试着不看提示自己选。

要清楚它只覆盖弹性布局的常见用法，真实页面里的容器嵌套、内容溢出、响应式切换都不讲。通关之后该做的是找个现成页面，用开发者工具把某个容器改成弹性布局，自己调参数看效果。做到能凭经验判断该调哪个属性、该给什么值，这一关才算真正过了。这一趟练下来，至少要能做到看到布局需求就知道该动哪个属性。

同类工具怎么选

谁适合用

• 初学 CSS、被布局属性绕晕的前端新手
• 需要快速回忆弹性布局属性用法的开发者
• 想找轻松方式给学生讲布局的老师

怎么开始

1. 打开 flexboxfroggy.com，选择简体中文界面。
2. 读第一关的说明，弄清青蛙和荷叶的目标关系。
3. 在代码区写属性，看画面变化，直到青蛙归位。
4. 做完全部关卡后关掉提示，再自己写一遍答案。
5. 找个真实页面用开发者工具改容器，验证学到的写法。

常见问题

要装什么环境吗？
不用，直接在浏览器里打开网页就能玩。

通关了就算学会布局了吗？
只学到了弹性布局的常见用法，复杂页面还要靠实践补。

有中文吗？
提供简繁中文等多个语言版本，可在页面里切换。

类似的还有别的游戏吗？
同一团队的站点还有其他 CSS 与编程主题的闯关游戏，可在页面底部找到入口。

授权与合规

项目以开源方式在 GitHub 上发布，网页版免费游玩，也可以自行部署或参与多语言翻译。 官网：flexboxfroggy.com/#zh-cn。