flex 网站这个器材，，，，，，，我第一次遇到的时辰真没当回事，，，，，，，感触不就是个操练 flexbox 的页面吗？？？？？了局上手玩了一下午，，，，，，，发现之前看文档看得一头雾水的处所，，，，，，，全通了。。。。。?

好多人学 flex 布局卡在 justify-content 和 align-items 到底谁管横谁管竖，，，，，，，其实不是记不住，，，，，，，是缺一个能上手练的环境。。。。。flex 网站就是干这个用的，，，，，，，它把抽象的属性造成了看得见摸得着的操作，，，，，，，直接让你在页面里拖、点、试，，，，，，，成效即时反馈。。。。。

先说最关键的一点，，，，，，，这类 flex 网站到底好在哪

好就好在它把进建造成了闯关。。。。。好比经典的 flexbox froggy，，，，，，，里面是一只幼田鸡要跳到荷叶上，，，，，，，每一关给你一个指标，，，，，，，让你用 flex 属性把它挪到位。。。。。一路头是 justify-content，，，，，，，接着是 align-items，，，，，，，再往后是 flex-direction、order、align-self 这些进阶属性。。。。。你写对一行代码，，，，，，，田鸡就跳从前了，，，，，，，写错它就呆在原地，，，，，，，那种成就感是真上头。。。。。?

不只是游戏，，，，，，，还有可视化工具类的 flex 网站，，，，，，，你调左边的滑块，，，，，，，右边布局实时随着变。。。。。flex-grow 从 0 拉到 2，，，，，，，你能眼睁睁看着那条柱子慢慢变宽。。。。。这衷祺材看十遍教程都不如自己拉一下来得领略，，，，，，，肌肉影象就是这么练出来的。。。。。

这一步好多人搞错了

好多人把 flex 网站当成纯游戏，，，，，，，玩完就关了，，，，，，，感触归正关卡过了就杏祝。。。。但真正的用法是，，，，，，，每一关过了之后，，，，，，，停下来想一下：刚才为什么这么写？？？？？若是把 flex-direction 改成 column，，，，，，，这题的答案会不会齐全变掉？？？？？?

我见过不少人卡在 froggy 的第七关，，，，，，，就是 flex-direction 和换行组合的那几题，，，，，，，过了就过，，，，，，，没想领略就持续硬闯。。。。。了局到了写真实页面的时辰，，，，，，，一遇到 wrap 和 nowrap 就乱了。。。。。其实不是学不会，，，，，，，是其时没把那个感触留住。。。。。

所以建议玩的时辰筹备个空缺文档，，，，，，，每过一关，，，，，，，把用到的属性和成效单一记一句。。。。。不用写多复杂，，，，，，，就一句人话，，，，，，，好比“flex-wrap 换成 wrap 之后，，，，，，，溢出的元素会换杏妆。。。。。这种笔记比摘抄官方文档切实多了。。。。。?

换个角度就通了

除了游戏和工具，，，，，，，还有一些 flex 网站专门放各类真实布局案例，，，，，，，好比导航栏、卡片列表、侧边栏、底部固定这种。。。。。你在那里能看到一个完齐全整的页面是怎么用 flex 搭出来的，，，，，，，甚至能直接复造代码拿去改。。。。。这些案例的价值在于，，，，，，，它助你把知识点和现实场景连上线了。。。。。

好比说导航栏，，，，，，，左右各一块，，，，，，，中央空缺，，，，，，，用 space-between 一下搞定。。。。。浚？？？ㄆ斜硐刖壬⒉，，，，，，，又不想最后一个贴边，，，，，，，用 gap 加 space-between 共同着来。。。。。这些器材你在游戏里不愿定能遇到，，，，，，，但在真实案例里一看到就懂，，，，，，，原来 flex 是这么用的。。。。。?

还有一点，，，，，，，好多 flex 网站把浏览器兼容情况也标出来了，，，，，，，哪些属性必要加前缀，，，，，，，哪些已经全兼容，，，，，，，看一眼就明显。。。。。省得自己一个个查，，，，，，，也的确实用。。。。。

其实学 flex 真正的门槛不在理解，，，，，，，在速度。。。。。你若是每次写布局都要想半天，，，，，，，那注明还没形成前提反射。。。。。flex 网站就是拿来练这个反射的。。。。。一个属性对应什么成效，，，，，，，手指比脑子先反映，，，，，，，这种状态一旦达到，，，，，，，写页面的时辰就会感触出格顺手。。。。。

最后说一句，，，，，，，这类网站别贪多，，，，，，，挑一个游戏型的、一个工具型的、一个案例型的，，，，，，，三个就够了。。。。。玩熟一个再换下一个，，，，，，，别东看看西看看，，，，，，，了局哪个都没玩透。。。。。你要是也卡在 flex 某几个属性上，，，，，，，去玩一玩，，，，，，，说不定半颖厩想通了。。。。。?