知識(shí)列表:
樣式參考指南:?https://github.com/doyoe/react-native-stylesheet-guide
1.?flex: 1,?盒子顯示主軸方向的剩余空間可婶。默認(rèn)為0
盒子中同級(jí)元素顯示的高或者寬的比例,flexDirection: 'row'則是寬比淑玫。
如A1,A2,A3三個(gè)的flex值分別為1, 1, 2.?則他們的寬或者高顯示的值比例為1:1:2
2. flexDirection: 'row'?或者'column'.?為'row'時(shí)拗馒,橫線則為主軸晾腔,豎線則為交叉軸。
3. flexWrap: 'wrap', 'nowrap',?是否對(duì)超出的部分進(jìn)行換行僵井。
4.?justifyContent:?盒子沿主軸線對(duì)齊方式庄萎。
5.?alignItems:?盒子沿交叉軸對(duì)齊方式。
6. alignSelf:?內(nèi)部盒子對(duì)自己本身做的對(duì)齊方式
效果演示:
1. flex:?
如下:box1與box2設(shè)置了flex,?則二者根據(jù)比例:1:2?顯示除沒有設(shè)置的box3的剩余空間挣惰。
2.?flexDirection:?
有row與column,? 當(dāng)為row時(shí),則橫向顯示。column時(shí)豎向顯示:
3.?flexWrap:?默認(rèn)是nowrap
wrap時(shí)如下:
4. justifyContent憎茂, 主軸方向?qū)R方式:flexDirection=='row'時(shí)珍语,橫線為主軸
flex-start, flex-end, center, space-between, space-around
space-between:
space-around:
5.? alignItems:?交叉軸對(duì)齊方式,?默認(rèn)是stretch竖幔,如果內(nèi)部盒子沒定義交叉方向的長(zhǎng)或高度板乙,則不受影響
flex-start, flex-end, center, stretch
stretch如下:
6.?alignSelf?內(nèi)部盒子的交叉軸方向?qū)R方式,
auto, flex-start, flex-end, center, stretch
auto默認(rèn)值拳氢,?自身設(shè)置了高或?qū)挾饶汲眩瑒t按設(shè)置的顯示,否則按stretch顯示