六角學院-FLEXPIRATE

發表於 更新於 分類於
六角學院是一個致力於提供學生舞台的線上教學平台，昨天開放了一個 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;

圖片

過關

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

圖片

可以給點牡蠣。
Google AD