一.flexDirection
父視圖布局
1.flexDirection默認(rèn)側(cè)軸從上至下排列
row:主軸(行) column側(cè)軸(列) reverse（反向）
<View style={ backgroundColor:"darkgray",marginTop:100}}>
<View style={{width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
2.flexDirection:'row' 主軸
<View style={{flexDirection:'row', backgroundColor:"darkgray",marginTop:100}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
3.flexDirection:'row-reverse' 主軸反向
<View style={{flexDirection:'row-reverse', backgroundColor:"darkgray",marginTop:100}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
二禽篱、flexWrap
flexWrap屬性定義了子元素在父視圖內(nèi)是否允許多行排列禁悠，默認(rèn)為nowrap快耿。
nowrap flex的元素只排列在一行上祸泪，可能導(dǎo)致溢出
wrap flex的元素在一行排列不下時(shí)，就進(jìn)行多行排列
<View style={{flexDirection:'row', flexWrap:'wrap',backgroundColor:"darkgray",marginTop:100}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:100,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:100,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:100,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:100,height:40,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
三、JustifyContent
JustifyContent屬性定義了瀏覽器如何分配順著父容器主軸的彈性（Flex）元素之間及其周圍的空間，默認(rèn)為flex-start景东。對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center奔誓、flex-end斤吐、space-around、space-between以及space-evenly厨喂。
flex-start(default)
從行首開始排列和措。每行第一個(gè)元素與行首對(duì)齊，同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊蜕煌。
flex-end
從行尾開始排列派阱。每行最后一個(gè)彈性元素與行尾對(duì)齊，其它元素與后一個(gè)對(duì)齊斜纪。
center
伸縮元素向每行中點(diǎn)排列贫母。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同文兑。
space-around
在每行上均勻分配彈性元。相鄰元素間距相同腺劣。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是和相鄰元素之間距離的一半
space-evenly
間距都相同
space-between
在每行上均勻分配彈性元素绿贞。相鄰元素間距相同。每行第一個(gè)元素到行尾的距離相同
四誓酒、alignItems
alignItems屬性以與justifyContent相同的方式在側(cè)軸方向上將當(dāng)前行上的彈性元素對(duì)齊樟蠕，默認(rèn)為stretch贮聂。
flex-start
元素向軸起點(diǎn)對(duì)齊
flex-end
元素向軸終點(diǎn)對(duì)齊靠柑。
center
元素在側(cè)軸居中。如果元素在側(cè)軸上的高度高于其容器吓懈。那么兩個(gè)方向上溢出距離相同
stretch
彈性元素被在側(cè)軸方向被拉伸到與容器的高度或?qū)挾?/p>
子視圖布局
一歼冰、alignSelf
alignSelf屬性以屬性定義了flex容器內(nèi)被選中項(xiàng)目的對(duì)齊方式。注意：alignSelf屬性可以重寫靈活容器alignItems屬性
auto(defalut)
元素繼承了它的付容器的align-itemss屬性耻警。如果沒有父容器則為stretch
stretch
元素被拉伸以適應(yīng)容器
center
元素位于容器中心
flex-start
元素位于容器開頭
flex-end
元素位于容器結(jié)尾
<View style={{flexDirection:'row', flexWrap:'nowrap',justifyContent:'space-around',alignItems:'center',backgroundColor:"darkgray",marginTop:100,height:500}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:50,height:50,backgroundColor:"darkcyan",margin:5,alignSelf:"flex-end"}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,alignSelf:'flex-start'}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
該列子中子視圖1和子視圖3設(shè)置alignSelf屬性讓子視圖自身不隨父視圖的alignItems屬性布局隔嫡。效果圖如下
二、flex
相當(dāng)與iOS中子視圖的比例系數(shù)
<View style={{flexDirection:'column', flexWrap:'nowrap',justifyContent:'space-around',alignItems:'center',backgroundColor:"darkgray",marginTop:100,height:500}}>
{/* <Text style={styles.welcome}>我的App</Text> */}
<View style={{width:50,height:50,backgroundColor:"darkcyan",margin:5,flex:1}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,flex:2}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,flex:2}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:50,height:50,backgroundColor:'darkcyan',margin:5,flex:1}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
參考博客
