六角學院-FLEXPIRATE

發表於 | 更新於 | 分類於

前言

六角學院是一個致力於提供學生舞台的線上教學平台，昨天開放了一個 FLEXPIRATE 遊戲，而本身就是六角學院的學生當然要去玩一下，所以在這邊做一些紀錄學習。

認識FlexBox

以往在開發版型時往往都會使用 float 元素來做控制，自從有了 FlexBox 對於前端開發者來講，是一個非常方便的參數。

但是 FlexBox 在最近整個大爆紅主要原因出在 CSS3 的規範普及，加上行動裝置的響應式布局 (RWD) 導致。

基本上 FlexBox 都是仰賴主軸和交叉軸來運作，先來繼續認識 Flex 參數，等一下讓我們直接實戰 FLEXPIRATE。

FlexBox參數認識

若要能夠使用 flex，就必須透過 dispaly 來改變元素。

1
display: flex;

再來我們來認識一下其他參數

1
2
3
4
5
6
7
8
justify-content
align-items
flex-wrap
align-self
align-content
flex-direction
order
flex

justify-content

justify-content 可選參數有以下幾種

1
2
3
4
5
6
flex-start // 容器開頭or起始點，這也是默認值
flex-end // 容器終點or結尾
center // 容器置中
space-between // 等均排列，通常會與around搞混
space-around // 元素前後留有空白的分配
space-evenly // 每個方塊之間擁有相同間隔

w3c練習

align-items

align-items 可選參數有以下幾種

1
2
3
4
5
6
7
stretch // 默認值
center // 置中
flex-start // 容器終點or結尾
flex-end // 容器開頭or起始點，這也是默認值
baseline 
initial
inherit

w3c練習

flex-wrap

flex-wrap 參數主要用於控制 flex 容器是否為單行或是多行，簡單來講就是超出容器時是否斷行。

1
2
3
4
5
nowrap // 默認值
wrap // 斷行
wrap-reverse // 反轉斷行
initial
inherit

w3c練習

align-self

align-self 主要是針對單獨在縱軸做處理，簡單來講就是中間的元素。

1
2
3
4
5
6
7
8
auto // 默認值
stretch // 基本上與auto相同，但是他會吃滿整個容器
center // 置中
flex-start // 元素開頭
flex-end // 元素結尾
baseline // 這個參數與flex-start類似
initial
inherit

w3c練習

align-content

align-content 是針對交叉軸上的容器做調整，另外這個參數必須要再多行 (使用 flex-wrap) 情況下才有效。

1
2
3
4
5
6
7
8
stretch // 默認值
center // 置中
flex-start // 元素開頭
flex-end // 元素結尾
space-between // 等均排列，通常會與around搞混
space-around // 元素前後留有空白的分配
initial
inherit

w3c練習

flex-direction

flex-direction 是將原本的主軸轉換成縱軸，而縱軸轉成主軸

1
2
3
4
5
6
row // 預設值，水平呈現
row-reverse // 反轉水平，原本的開頭便到結尾，而結尾轉至開頭
column // 將元素垂直顯示
column-reverse // 反轉垂直，原本的開頭便到結尾，而結尾轉至開頭
initial
inherit

order

order 可以將元素的順序做調整，原本 A 變成 B 而 B 變成 A

w3c練習

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
2
display: flex;
justify-content: flex-end;

Level.3

第三關海盜船停在主軸中間，這時候就要使用 center。

1
2
display: flex;
justify-content: center;

Level.4

第四關出現了三艘海盜船，他們均勻地分配而且前後都有空白元素，由此分析我們就要採用 space-around。

1
2
display: flex;
justify-content: space-around;

Level.5

第五關海盜船只有中間那一艘占用最多空白元素，那就使用 space-between。

1
2
display: flex;
justify-content: space-between;

Level.6

第六關開始將會考驗交錯軸觀念，所以我們這邊要將準心元素修改置交錯軸結尾。

1
2
display: flex;
align-items: flex-end;

Level.7

第七關這個海盜跑到了交錯軸中心，所以我們這邊使用 center。

1
2
display: flex;
align-items: center;

Level.8

oh! 這次是我們自己六角船艦，船長說覺得累了要到中央休息，所以在這邊我們可以使用剛剛打敗海盜船的技術 justify-content: center 和 align-items: center 來完成船長的指令。

1
2
3
display: flex;
justify-content: center;
align-items: center;

Level.9

海盜船又出現了，這次出現在結尾並且前後都沒有多餘空白，所以使用 space-between。

1
2
3
display: flex;
justify-content: space-between;
align-items: flex-end;

Level.10

第十關開始出現新的參數 flex-wrap，所以這邊就試著用用看 flex-wrap:wrap 吧。

1
2
display: flex;
flex-wrap: wrap;

Level.11

結果這次小海盜船跑到下面了，也不用擔心 flex 中有一個 reverse 參數可以反轉!

1
2
display: flex;
flex-wrap: wrap-reverse;

Level.12

結果在這一次的進攻中，海盜船改用別的排列方式了，如果單純只使用 flex-wrap 是絕對打不倒的，所以我們必須使用 alig-content 參數(前面有講到這參數必須在有 flex-wrap 下才能使用)。

1
2
3
display: flex;
flex-wrap: wrap;
align-content: flex-start;

Level.13

這次的排列更麻煩了，所以我們必須搭配前面 justify-content 來使用。

1
2
3
4
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;

Level.14

這是海盜船整個都面向交錯軸了，所以我們必須改變交錯軸及主軸，這時候就輪到 flex-dirction。

1
2
3
display: flex;
align-items: center;
flex-direction: column;

Level.15

海盜船這次認為我們改變了交錯軸 & 主軸後就打不到他們，但是我們已經學會 justify-content，怎麼可能打不到呢?

1
2
3
display: flex;
justify-content: center;
flex-direction: column;

Level.16

可惡的海盜船，這是改跑到中間，沒關係我們剛剛前面已經學會使用 justify-content 及 align-items，所以這一次再拿出來用!

1
2
3
4
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;

Level.17

真是不死心的海盜船，我們這次使用 flex-wrap: wrap 結束這回合。

1
2
3
4
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;

Level.18

排列開始複雜了，在這邊必須注意大海盜船的位子唷

1
2
3
4
5
display: flex;
flex-wrap: wrap-reverse;
align-content: space-between;
justify-content: space-between;
flex-direction: column;

Level.19

這次必須用到了多行又反轉的技巧!

1
2
3
4
5
display: flex;
flex-wrap: wrap-reverse;
align-content: flex-start;
justify-content: center;
flex-direction: column;

Level.20

第二十關其實很有兩種做法，但是推薦第一種，第二種系統不會認可，但是一樣貼出來紀錄:D

解答作法:

1
2
3
4
display: flex;
align-items:center;
justify-content: center;
flex-direction: row-reverse;

另一種作法:

1
2
3
4
5
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
flex-direction: row-reverse;

過關

在結尾時將會顯示你挑戰幾秒而過關，如果有不錯的建議都可以回饋表單給開發者，這樣子遊戲品質才會持續提升唷!

0%