建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
玩著游戲就把前端知識學(xué)了，賊爽！??！
一、基礎(chǔ)知識
1.1 justify-conent
justify-content屬性定義了項目在主軸上的對齊方式。
- flex-start(默認(rèn)值)：左對齊
- flex-end：右對齊
- center：居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
1.2 align-items
align-items屬性定義項目在交叉軸上如何對齊。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch(默認(rèn)值)：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
1.3 flex-direction
flex-direction屬性決定主軸的方向(即項目的排列方向)
- row(默認(rèn)值)：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
1.4 order
order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
1.5 align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
二、游戲攻略
基礎(chǔ)知識已經(jīng)儲備完畢，下面就靠這些三板斧進行通關(guān)操作了，一言不合就是砍。
2.1 關(guān)卡1
用justify-content就可以解決。
2.2 關(guān)卡2
用justify-content就可以解決。
2.3 關(guān)卡3
用justify-content就可以解決。
2.4 關(guān)卡4
用align-items就可以解決。
2.5 關(guān)卡5
用justify-content、align-items就可以解決。
2.6 關(guān)卡6
用justify-content、align-items就可以解決。
2.7 關(guān)卡7
用flex-direction就可以解決。
2.8 關(guān)卡8
用flex-direction、align-items就可以解決。
2.9 關(guān)卡9
這個關(guān)卡增加了新的武器——散彈炮，這個位置千萬要注意，此關(guān)卡用flex-direction、justify-content、align-items就可以解決。
2.10 關(guān)卡10
用justify-content、order就可以解決。
2.11 關(guān)卡11
用justify-content、align-self就可以解決。
2.12 關(guān)卡12
用flex-direction、justify-content、align-self、order就可以解決。
分享題目：玩著游戲就把前端知識學(xué)了，賊爽！??！
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/dpsceij.html
