一、基礎知識

這是一款塔防類游戲，有點像保衛蘿卜，該款游戲共12個關卡，為了通關需要了解Flex布局的一些知識，下面就來簡單科普一下需要用到的小知識點【注：本文僅科普需要用到的知識點，更加詳細的可看官方文檔】。

1.1 justify-conent

justify-content屬性定義了項目在主軸上的對齊方式。

• flex-start(默認值)：左對齊
• flex-end：右對齊
• center：居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

1.2 align-items

align-items屬性定義項目在交叉軸上如何對齊。

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch(默認值)：如果項目未設置高度或設為auto，將占滿整個容器的高度。

1.3 flex-direction

flex-direction屬性決定主軸的方向(即項目的排列方向)

• row(默認值)：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

1.4 order

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

1.5 align-self

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

二、游戲攻略

基礎知識已經儲備完畢，下面就靠這些三板斧進行通關操作了，一言不合就是砍。

2.1 關卡1

用justify-content就可以解決。

2.2 關卡2

用justify-content就可以解決。

2.3 關卡3

用justify-content就可以解決。

2.4 關卡4

用align-items就可以解決。

2.5 關卡5

用justify-content、align-items就可以解決。

2.6 關卡6

用justify-content、align-items就可以解決。

2.7 關卡7

用flex-direction就可以解決。

2.8 關卡8

用flex-direction、align-items就可以解決。

2.9 關卡9

這個關卡增加了新的武器——散彈炮，這個位置千萬要注意，此關卡用flex-direction、justify-content、align-items就可以解決。

2.10 關卡10

用justify-content、order就可以解決。

2.11 關卡11

用justify-content、align-self就可以解決。

2.12 關卡12

用flex-direction、justify-content、align-self、order就可以解決。