年前有朋友推薦我Flexbox Froggy 青蛙游戲?qū)W習(xí)flex . 一直沒有玩科雳。
然后一直覺得flex是個新鮮前沿的東西猿规，可能會比較難。
現(xiàn)在我開始第二遍玩這個游戲买喧，sense point 如下：
- 第一關(guān)，使用justify-content屬性匆赃，將青蛙移動到右側(cè)淤毛。我習(xí)慣性的屬性輸入 right 。 不對算柳。然后更正為flex-end低淡。
第二次玩，也是這個習(xí)慣瞬项。這讓我意識到蔗蹋，自己已有的認(rèn)知給了我思維的慣性。 - center屬性囱淋，跟以前的習(xí)慣是一樣的纸颜。
- space-around 和 space-between, 我對這兩個屬性的第一意象，跟實際是相反的绎橘。我的意象之中胁孙，between要比around更和諧，而我認(rèn)為間隔分布在兩側(cè)更和諧称鳞。多使用一下around就能感覺around更和諧了涮较。
- 第五關(guān)，align-items冈止。第一次玩這一關(guān)時狂票，是直到align-item在意念中的感覺的。但玩完24關(guān)之后熙暴，這個意念中的感覺和align-content混淆了闺属。所以呢慌盯，align-items 應(yīng)該是什么感覺呢？應(yīng)該是先在意念之中部署主軸上的justify-content掂器，有了主軸之后亚皂，才知道如何使用align-items操作側(cè)軸。
- 第六關(guān)国瓮，同時使用justify-content和align-items,就不覺得混淆了..
- 第七關(guān)灭必，又練習(xí)了一下同時使用這兩個屬性，覺得這對厘清這兩個屬性的使用方法挺棒的乃摹。但第一次過關(guān)的時候沒有這么清楚的認(rèn)識禁漓。
- 第八關(guān)，到了direction 的 reverse屬性值了孵睬。 這一關(guān)播歼，是要在臆想世界里增加一個鏡像世界，空間想象腦力負(fù)荷瞬間翻倍掰读，自動選擇笨方法秘狞，如果不是想要的就加個reverse試一下。
- flex-direction磷支，不帶reverse時谒撼，row，column的默認(rèn)方向跟第一次學(xué)習(xí)數(shù)學(xué)座標(biāo)系的x雾狈、y軸方向不一致廓潜，但跟文檔（document的event.x、y）的默認(rèn)方向一直善榛。
- 第十一關(guān)辩蛋，看到頁面中的提示，當(dāng)flex以列為方向時移盆，justify-content的控制方向變化悼院。深以為這樣的認(rèn)知方法不正確，腦海中以主軸側(cè)軸為基準(zhǔn)咒循，使用direction變化主軸側(cè)軸之時据途，控制方向依然和基準(zhǔn)一致。但是叙甸，就初學(xué)時刻颖医，頁面之中的提示是最有效的啟發(fā)方式了。我想說這種認(rèn)知方式增加了一層轉(zhuǎn)換的邏輯裆蒸，是冗余的熔萧。
- 十二關(guān)，要用到我在意念上不習(xí)慣的space-between了。
- 十三關(guān)佛致，放松心情贮缕，看一眼，腦海里一次性選好屬性和值俺榆，不需要試一下是不是reverse了感昼。相比第一次心里有底多了。
- 十四關(guān)肋演，order沒難度抑诸。第一次玩的時候使用0烂琴，都達(dá)不到自己的預(yù)期爹殊，然后想到了-1。覺得蠻自然的奸绷。第二次過關(guān)梗夸，能觀察到熟練度高。
- 十六關(guān)号醉，使用到了align-self反症。第二次過關(guān)，我意識到畔派，align-self雖然和align-items的屬性值一致铅碍。但是，它所在的元素有區(qū)別线椰。align-items寫在父元素下與display:flex在一級胞谈。 而align-self寫在子元素下，用來覆蓋從父元素那兒得到的設(shè)定憨愉。
- 十七關(guān)烦绳，我信誓旦旦的要做這一關(guān)。這一關(guān)需要用到order配紫。而我沒有想到径密。按照以前沒有flex的情況，次序不同躺孝，強行差別float left\right就可以了享扔。下次我要記得使用order。
- 十八關(guān)植袍，我使用flex-wrap:wrap惧眠，竟然看走了眼。還自己加上了flex-flow:row wrap奋单。精神總是有混沌的時候锉试。
- 二十一關(guān)，align-content，待我沉思一下呆盖。這個跟align-items在控制的邏輯上類似拖云。然后，這個跟第十六關(guān)align-self找到的區(qū)別類似应又，同樣寫在父元素上宙项，但是控制的層級為父子兩級。通過寫
align-content:stretch; align-items: center | flex-end;能夠察覺出來變化株扛。在意識上的認(rèn)知更加具體尤筐。 - 二十三關(guān)，我嘗試使用‘一次選擇’的方式設(shè)定屬性值洞就。然后發(fā)現(xiàn)了一個屬性覆蓋：使用flex-wrap:wrap;之后盆繁，再寫不完整的flex-flow:row；會覆蓋掉wrap旬蟋，為nowrap油昂。每個瀏覽器是否表現(xiàn)一致。以后再測倾贰。然后冕碟，我想要使青蛙往中間靠。操作多個子item往中間靠的匆浙，使用justify-content完成過安寺。這兒軸基準(zhǔn)變化了。應(yīng)該用align了首尼，但是align-items應(yīng)該不行挑庶，試一下，跟上一關(guān)認(rèn)識到的align-content饰恕，align-item區(qū)別一致挠羔。所以，這兒用align-content一定能夠解決問題埋嵌。但我知道破加，我大腦里神經(jīng)元細(xì)胞還沒有建立對應(yīng)的連接。那么等以后使用的時候雹嗦，再進(jìn)行建立吧范舀。
- 二十四關(guān)。最后一關(guān)了罪。嘗試一次完成锭环。讓思路連貫起來，非常自然的使用flex-flow組合屬性泊藕「ū纾看到往兩邊撇，這兒一定用到了space-between，而且還是用content設(shè)定的玫锋。然后蛾茉，水平上居中，那么用到了center撩鹿。最后谦炬，主軸方向的reverse疏忽了。調(diào)過來节沦。OK键思，大腦能夠同時處理的信息流有限，再一次通關(guān)甫贯，覺得很順暢吼鳞。
斷斷續(xù)續(xù)完成本篇記錄，覺得Catch到了東西获搏。
我感覺應(yīng)該寫一篇博客赖条。沒有題材失乾。
然后我就寫了本篇常熙。這應(yīng)該是‘意識流’風(fēng)格的。
