六角學院-FLEXPIRATE
前言
六角學院是一個致力於提供學生舞台的線上教學平台,昨天開放了一個 FLEXPIRATE 遊戲,而本身就是六角學院的學生當然要去玩一下,所以在這邊做一些紀錄學習。
認識FlexBox
以往在開發版型時往往都會使用 float 元素來做控制,自從有了 FlexBox 對於前端開發者來講,是一個非常方便的參數。
但是 FlexBox 在最近整個大爆紅主要原因出在 CSS3 的規範普及,加上行動裝置的響應式布局 (RWD) 導致。
基本上 FlexBox 都是仰賴主軸和交叉軸來運作,先來繼續認識 Flex 參數,等一下讓我們直接實戰 FLEXPIRATE。
FlexBox參數認識
若要能夠使用 flex,就必須透過 dispaly 來改變元素。
1 | display: flex; |
再來我們來認識一下其他參數
1 | justify-content |
justify-content
justify-content 可選參數有以下幾種
1 | flex-start // 容器開頭or起始點,這也是默認值 |
align-items
align-items 可選參數有以下幾種
1 | stretch // 默認值 |
flex-wrap
flex-wrap 參數主要用於控制 flex 容器是否為單行或是多行,簡單來講就是超出容器時是否斷行。
1 | nowrap // 默認值 |
align-self
align-self 主要是針對單獨在縱軸做處理,簡單來講就是中間的元素。
1 | auto // 默認值 |
align-content
align-content 是針對交叉軸上的容器做調整,另外這個參數必須要再多行 (使用 flex-wrap) 情況下才有效。
1 | stretch // 默認值 |
flex-direction
flex-direction 是將原本的主軸轉換成縱軸,而縱軸轉成主軸
1 | row // 預設值,水平呈現 |
order
order 可以將元素的順序做調整,原本 A 變成 B 而 B 變成 A
flex
這個參數其實是 flex-grow、 flex-shrink 和 flex-basis 的簡寫。
1 | flex: flex-grow flex-shrink flex-basis |
依照參數撰寫後可這樣寫
1 | flex: 1 1 auto |
認識參數結尾
參數使用上若僅僅附上圖片是很難了解使用方式,所以看完以上參數有一個基本認知之後就準備直接挑戰 FLEXPIRATE,透過實戰來學習會比紙上談兵更實在。
FLEXPIRATE Start
開頭進去將會有一段簡易的故事說明,而我們主要是控制準心來打爆海盜船!
連結→FLEXPIRATE
Level.1
第一關必須將準心元素改成 flexbox 才能夠瞄準海盜船。
1 | display: flex; |
Level.2
第二關你會發現海盜船都躲上主軸結尾,所以我們這邊必須使用 flex-end 來將元素移置結尾。
1 | display: flex; |
Level.3
第三關海盜船停在主軸中間,這時候就要使用 center。
1 | display: flex; |
Level.4
第四關出現了三艘海盜船,他們均勻地分配而且前後都有空白元素,由此分析我們就要採用 space-around。
1 | display: flex; |
Level.5
第五關海盜船只有中間那一艘占用最多空白元素,那就使用 space-between。
1 | display: flex; |
Level.6
第六關開始將會考驗交錯軸觀念,所以我們這邊要將準心元素修改置交錯軸結尾。
1 | display: flex; |
Level.7
第七關這個海盜跑到了交錯軸中心,所以我們這邊使用 center。
1 | display: flex; |
Level.8
oh! 這次是我們自己六角船艦,船長說覺得累了要到中央休息,所以在這邊我們可以使用剛剛打敗海盜船的技術 justify-content: center 和 align-items: center 來完成船長的指令。
1 | display: flex; |
Level.9
海盜船又出現了,這次出現在結尾並且前後都沒有多餘空白,所以使用 space-between。
1 | display: flex; |
Level.10
第十關開始出現新的參數 flex-wrap,所以這邊就試著用用看 flex-wrap:wrap 吧。
1 | display: flex; |
Level.11
結果這次小海盜船跑到下面了,也不用擔心 flex 中有一個 reverse 參數可以反轉!
1 | display: flex; |
Level.12
結果在這一次的進攻中,海盜船改用別的排列方式了,如果單純只使用 flex-wrap 是絕對打不倒的,所以我們必須使用 alig-content 參數(前面有講到這參數必須在有 flex-wrap 下才能使用)。
1 | display: flex; |
Level.13
這次的排列更麻煩了,所以我們必須搭配前面 justify-content 來使用。
1 | display: flex; |
Level.14
這是海盜船整個都面向交錯軸了,所以我們必須改變交錯軸及主軸,這時候就輪到 flex-dirction。
1 | display: flex; |
Level.15
海盜船這次認為我們改變了交錯軸 & 主軸後就打不到他們,但是我們已經學會 justify-content,怎麼可能打不到呢?
1 | display: flex; |
Level.16
可惡的海盜船,這是改跑到中間,沒關係我們剛剛前面已經學會使用 justify-content 及 align-items,所以這一次再拿出來用!
1 | display: flex; |
Level.17
真是不死心的海盜船,我們這次使用 flex-wrap: wrap 結束這回合。
1 | display: flex; |
Level.18
排列開始複雜了,在這邊必須注意大海盜船的位子唷
1 | display: flex; |
Level.19
這次必須用到了多行又反轉的技巧!
1 | display: flex; |
Level.20
第二十關其實很有兩種做法,但是推薦第一種,第二種系統不會認可,但是一樣貼出來紀錄:D
解答作法:
1 | display: flex; |
另一種作法:
1 | display: flex; |
過關
在結尾時將會顯示你挑戰幾秒而過關,如果有不錯的建議都可以回饋表單給開發者,這樣子遊戲品質才會持續提升唷!