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