玩著游戲就把前端知識學了，賊爽！！！
一、基礎知識
這是一款塔防類游戲，有點像保衛蘿卜，該款游戲共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就可以解決。
