我玩了两遍Frog游戏

年前有朋友推荐我Flexbox Froggy 青蛙游戏学习flex . 一直没有玩。
然后一直觉得flex是个新鲜前沿的东西，可能会比较难。

现在我开始第二遍玩这个游戏，sense point 如下：

1. 第一关，使用justify-content属性，将青蛙移动到右侧。我习惯性的属性输入 right 。 不对。然后更正为flex-end。
   第二次玩，也是这个习惯。这让我意识到，自己已有的认知给了我思维的惯性。
2. center属性，跟以前的习惯是一样的。
3. space-around 和 space-between, 我对这两个属性的第一意象，跟实际是相反的。我的意象之中，between要比around更和谐，而我认为间隔分布在两侧更和谐。多使用一下around就能感觉around更和谐了。
4. 第五关，align-items。第一次玩这一关时，是直到align-item在意念中的感觉的。但玩完24关之后，这个意念中的感觉和align-content混淆了。所以呢，align-items 应该是什么感觉呢？应该是先在意念之中部署主轴上的justify-content，有了主轴之后，才知道如何使用align-items操作侧轴。
5. 第六关，同时使用justify-content和align-items,就不觉得混淆了..
6. 第七关，又练习了一下同时使用这两个属性，觉得这对厘清这两个属性的使用方法挺棒的。但第一次过关的时候没有这么清楚的认识。
7. 第八关，到了direction 的 reverse属性值了。 这一关，是要在臆想世界里增加一个镜像世界，空间想象脑力负荷瞬间翻倍，自动选择笨方法，如果不是想要的就加个reverse试一下。
8. flex-direction，不带reverse时，row，column的默认方向跟第一次学习数学座标系的x、y轴方向不一致，但跟文档（document的event.x、y）的默认方向一直。
9. 第十一关，看到页面中的提示，当flex以列为方向时，justify-content的控制方向变化。深以为这样的认知方法不正确，脑海中以主轴侧轴为基准，使用direction变化主轴侧轴之时，控制方向依然和基准一致。但是，就初学时刻，页面之中的提示是最有效的启发方式了。我想说这种认知方式增加了一层转换的逻辑，是冗余的。
10. 十二关，要用到我在意念上不习惯的space-between了。
11. 十三关，放松心情，看一眼，脑海里一次性选好属性和值，不需要试一下是不是reverse了。相比第一次心里有底多了。
12. 十四关，order没难度。第一次玩的时候使用0，都达不到自己的预期，然后想到了-1。觉得蛮自然的。第二次过关，能观察到熟练度高。
13. 十六关，使用到了align-self。第二次过关，我意识到，align-self虽然和align-items的属性值一致。但是，它所在的元素有区别。align-items写在父元素下与display:flex在一级。 而align-self写在子元素下，用来覆盖从父元素那儿得到的设定。
14. 十七关，我信誓旦旦的要做这一关。这一关需要用到order。而我没有想到。按照以前没有flex的情况，次序不同，强行差别float left\right就可以了。下次我要记得使用order。
15. 十八关，我使用flex-wrap:wrap，竟然看走了眼。还自己加上了flex-flow:row wrap。精神总是有混沌的时候。
16. 二十一关，align-content，待我沉思一下。这个跟align-items在控制的逻辑上类似。然后，这个跟第十六关align-self找到的区别类似，同样写在父元素上，但是控制的层级为父子两级。通过写align-content:stretch; align-items: center | flex-end; 能够察觉出来变化。在意识上的认知更加具体。
17. 二十三关，我尝试使用‘一次选择’的方式设定属性值。然后发现了一个属性覆盖：使用flex-wrap:wrap;之后，再写不完整的flex-flow:row；会覆盖掉wrap，为nowrap。每个浏览器是否表现一致。以后再测。然后，我想要使青蛙往中间靠。操作多个子item往中间靠的，使用justify-content完成过。这儿轴基准变化了。应该用align了，但是align-items应该不行，试一下，跟上一关认识到的align-content，align-item区别一致。所以，这儿用align-content一定能够解决问题。但我知道，我大脑里神经元细胞还没有建立对应的连接。那么等以后使用的时候，再进行建立吧。
18. 二十四关。最后一关。尝试一次完成。让思路连贯起来，非常自然的使用flex-flow组合属性。看到往两边撇，这儿一定用到了space-between，而且还是用content设定的。然后，水平上居中，那么用到了center。最后，主轴方向的reverse疏忽了。调过来。OK，大脑能够同时处理的信息流有限，再一次通关，觉得很顺畅。
    断断续续完成本篇记录，觉得Catch到了东西。

---

我感觉应该写一篇博客。没有题材。
然后我就写了本篇。这应该是‘意识流’风格的。