Flexbox Froggy青蛙遊戲全記錄(下)

flexbox froggy是一款免費的flexbox線上遊戲,非常推薦flex新手學習,共有24關。遊戲目標是讓青蛙們乖乖回家。因為篇幅過長分上下兩集:D

遊戲網址:https://flexboxfroggy.com

Level 13

青蛙們順序反了,要先讓他們重新排隊再讓他們跳到下面中間的位置。

flex-direction: row-reverse; //水平反轉
justify-content: center; //主軸線置中
align-items: flex-end; //交錯軸置底

Level 14

綠蛙1、紅蛙2、黃蛙3,指定黃蛙yellow移動。(假設是指定紅蛙移動,.red{order:2;}也可以達到一樣的效果喔)

order: 3; //順序3

Level 15

小紅蛙喜歡搶鏡頭排第一,要衝到最前面, order的數字是允許負值的噢~

order屬性在RWD響應式裡面非常好用,可以在小裝置的時候排序213,中裝置排序312,大裝置排序123,完全變換自如啊。

order: -1; //順序 -1

Level 16

這隻菜鳥黃蛙忘記偽裝成綠色被點名了。前面幾個關卡都是集體移動,這裡指定黃蛙動綠蛙不動,使用align-self就能讓黃蛙單獨移動了。

align-self: flex-end; //單獨置底

Level 17

兩隻黃蛙想去角落講秘密悄悄話。首先要讓順序錯開的黃蛙排在一起,再讓它們單獨置底。

order: 2; //順序 2
align-self: flex-end; //單獨置底

Level 18

7隻蛙太擠啦~一排就5個,超過的就讓他們去下一排,趕緊讓他們鬆口氣吧。

flex-wrap: wrap; //換行

Level 19

這些蛙感覺要窒息了,要讓他們超過的去下一排之外,還要改成直的排隊喔。

flex-direction: column; //直排
flex-wrap: wrap; //換行

Level 20

承接level 19,通常flex-direction和flex-wrap會同時出現,所以就有縮寫flex-flow的形態。

flex-flow: column wrap; //直排+換行

Level 21

這群蛙是部隊兵,一個口令要讓一群蛙全部向上集中,就要用到align-content啦~

後面可接6種屬性:flex-start/ flex-end/ center/ space-between/ space-around/ stretch。通常align-content是多行才有作用單行無效,所以這邊寫多行置頂方便記憶。

align-content: flex-start; //多行置頂

Level 22

部隊蛙要集體往下移動~多團結啊。

align-content: flex-end; //多行置底

Level 23

這群蛙沒受過訓練,排隊都排反了,轉90度之外,還要往中間集中靠攏囉。

flex-direction: column-reverse; //直排反轉
align-content: center; //多行置中

Level 24

最後一關是綜合技大爆發幾乎全用上,考驗你是不是都會了混合運用。

flex-direction: column-reverse; //直排反轉
flex-wrap: wrap-reverse; //換行反轉
align-content: space-between; //交錯軸等距
justify-content: center; //主軸線置中

破關完成

完成全部關卡,青蛙就會舉國歡騰雀躍無比的彈跳個沒完 XD

如果不熟的話,慢慢玩幾次就會記起來了,對於在flex排版上有很大的幫助,使用頻率最高的就是justify-content和align-items了,order也很好用。其他雖然少用可是透過遊戲可以了解flexbox的家族成員也是很棒呢,希望大家都能有所收獲囉~