建站
咨詢
售后
建站咨詢
新聞中心
一、基礎(chǔ)知識(shí)
1.1 justify-conent
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
- flex-start(默認(rèn)值)：左對(duì)齊
- flex-end：右對(duì)齊
- center：居中
- space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
- space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
1.2 align-items
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
- flex-start：交叉軸的起點(diǎn)對(duì)齊。
- flex-end：交叉軸的終點(diǎn)對(duì)齊。
- center：交叉軸的中點(diǎn)對(duì)齊。
- baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
- stretch(默認(rèn)值)：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。
1.3 flex-direction
flex-direction屬性決定主軸的方向(即項(xiàng)目的排列方向)
- row(默認(rèn)值)：主軸為水平方向，起點(diǎn)在左端。
- row-reverse：主軸為水平方向，起點(diǎn)在右端。
- column：主軸為垂直方向，起點(diǎn)在上沿。
- column-reverse：主軸為垂直方向，起點(diǎn)在下沿。
1.4 order
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
1.5 align-self
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。
二、游戲攻略
基礎(chǔ)知識(shí)已經(jīng)儲(chǔ)備完畢，下面就靠這些三板斧進(jìn)行通關(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
這個(gè)關(guān)卡增加了新的武器——散彈炮，這個(gè)位置千萬(wà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就可以解決。
分享名稱：玩著游戲就把前端知識(shí)學(xué)了，賊爽?。?！
本文鏈接：http://m.fisionsoft.com.cn/article/dpsceij.html
