年前有朋友推薦我Flexbox Froggy 青蛙游戲?qū)W習(xí)flex . 一直沒(méi)有玩。
然后一直覺(jué)得flex是個(gè)新鮮前沿的東西，可能會(huì)比較難。
現(xiàn)在我開(kāi)始第二遍玩這個(gè)游戲，sense point 如下：
- 第一關(guān)，使用justify-content屬性，將青蛙移動(dòng)到右側(cè)。我習(xí)慣性的屬性輸入 right 。 不對(duì)。然后更正為flex-end。
第二次玩，也是這個(gè)習(xí)慣。這讓我意識(shí)到，自己已有的認(rèn)知給了我思維的慣性。 - center屬性，跟以前的習(xí)慣是一樣的。
- space-around 和 space-between, 我對(duì)這兩個(gè)屬性的第一意象，跟實(shí)際是相反的。我的意象之中，between要比around更和諧，而我認(rèn)為間隔分布在兩側(cè)更和諧。多使用一下around就能感覺(jué)around更和諧了。
- 第五關(guān)，align-items。第一次玩這一關(guān)時(shí)，是直到align-item在意念中的感覺(jué)的。但玩完24關(guān)之后，這個(gè)意念中的感覺(jué)和align-content混淆了。所以呢，align-items 應(yīng)該是什么感覺(jué)呢？應(yīng)該是先在意念之中部署主軸上的justify-content，有了主軸之后，才知道如何使用align-items操作側(cè)軸。
- 第六關(guān)，同時(shí)使用justify-content和align-items,就不覺(jué)得混淆了..
- 第七關(guān)，又練習(xí)了一下同時(shí)使用這兩個(gè)屬性，覺(jué)得這對(duì)厘清這兩個(gè)屬性的使用方法挺棒的。但第一次過(guò)關(guān)的時(shí)候沒(méi)有這么清楚的認(rèn)識(shí)。
- 第八關(guān)，到了direction 的 reverse屬性值了。 這一關(guān)，是要在臆想世界里增加一個(gè)鏡像世界，空間想象腦力負(fù)荷瞬間翻倍，自動(dòng)選擇笨方法，如果不是想要的就加個(gè)reverse試一下。
- flex-direction，不帶reverse時(shí)，row，column的默認(rèn)方向跟第一次學(xué)習(xí)數(shù)學(xué)座標(biāo)系的x、y軸方向不一致，但跟文檔（document的event.x、y）的默認(rèn)方向一直。
- 第十一關(guān)，看到頁(yè)面中的提示，當(dāng)flex以列為方向時(shí)，justify-content的控制方向變化。深以為這樣的認(rèn)知方法不正確，腦海中以主軸側(cè)軸為基準(zhǔn)，使用direction變化主軸側(cè)軸之時(shí)，控制方向依然和基準(zhǔn)一致。但是，就初學(xué)時(shí)刻，頁(yè)面之中的提示是最有效的啟發(fā)方式了。我想說(shuō)這種認(rèn)知方式增加了一層轉(zhuǎn)換的邏輯，是冗余的。
- 十二關(guān)，要用到我在意念上不習(xí)慣的space-between了。
- 十三關(guān)，放松心情，看一眼，腦海里一次性選好屬性和值，不需要試一下是不是reverse了。相比第一次心里有底多了。
- 十四關(guān)，order沒(méi)難度。第一次玩的時(shí)候使用0，都達(dá)不到自己的預(yù)期，然后想到了-1。覺(jué)得蠻自然的。第二次過(guò)關(guān)，能觀察到熟練度高。
- 十六關(guān)，使用到了align-self。第二次過(guò)關(guān)，我意識(shí)到，align-self雖然和align-items的屬性值一致。但是，它所在的元素有區(qū)別。align-items寫在父元素下與display:flex在一級(jí)。 而align-self寫在子元素下，用來(lái)覆蓋從父元素那兒得到的設(shè)定。
- 十七關(guān)，我信誓旦旦的要做這一關(guān)。這一關(guān)需要用到order。而我沒(méi)有想到。按照以前沒(méi)有flex的情況，次序不同，強(qiáng)行差別float left\right就可以了。下次我要記得使用order。
- 十八關(guān)，我使用flex-wrap:wrap，竟然看走了眼。還自己加上了flex-flow:row wrap。精神總是有混沌的時(shí)候。
- 二十一關(guān)，align-content，待我沉思一下。這個(gè)跟align-items在控制的邏輯上類似。然后，這個(gè)跟第十六關(guān)align-self找到的區(qū)別類似，同樣寫在父元素上，但是控制的層級(jí)為父子兩級(jí)。通過(guò)寫
align-content:stretch; align-items: center | flex-end;能夠察覺(jué)出來(lái)變化。在意識(shí)上的認(rèn)知更加具體。 - 二十三關(guān)，我嘗試使用‘一次選擇’的方式設(shè)定屬性值。然后發(fā)現(xiàn)了一個(gè)屬性覆蓋：使用flex-wrap:wrap;之后，再寫不完整的flex-flow:row；會(huì)覆蓋掉wrap，為nowrap。每個(gè)瀏覽器是否表現(xiàn)一致。以后再測(cè)。然后，我想要使青蛙往中間靠。操作多個(gè)子item往中間靠的，使用justify-content完成過(guò)。這兒軸基準(zhǔn)變化了。應(yīng)該用align了，但是align-items應(yīng)該不行，試一下，跟上一關(guān)認(rèn)識(shí)到的align-content，align-item區(qū)別一致。所以，這兒用align-content一定能夠解決問(wèn)題。但我知道，我大腦里神經(jīng)元細(xì)胞還沒(méi)有建立對(duì)應(yīng)的連接。那么等以后使用的時(shí)候，再進(jìn)行建立吧。
- 二十四關(guān)。最后一關(guān)。嘗試一次完成。讓思路連貫起來(lái)，非常自然的使用flex-flow組合屬性?？吹酵鶅蛇吰?，這兒一定用到了space-between，而且還是用content設(shè)定的。然后，水平上居中，那么用到了center。最后，主軸方向的reverse疏忽了。調(diào)過(guò)來(lái)。OK，大腦能夠同時(shí)處理的信息流有限，再一次通關(guān)，覺(jué)得很順暢。
斷斷續(xù)續(xù)完成本篇記錄，覺(jué)得Catch到了東西。
我感覺(jué)應(yīng)該寫一篇博客。沒(méi)有題材。
然后我就寫了本篇。這應(yīng)該是‘意識(shí)流’風(fēng)格的。
