flexbox是有伸縮容器和伸縮項(xiàng)目組成。任何一個(gè)元素都可以指定flexbox布局，伸縮容器的子元素可以稱為伸縮項(xiàng)目。伸縮項(xiàng)目使用伸縮布局模型來排版。在默認(rèn)情況下，伸縮容器有兩根軸組成：主軸（main axis）和交叉軸（cross axis）,主軸開始的位置叫main stat,結(jié)束的位置叫main end。交叉軸開始的位置叫cross start，結(jié)束的位置叫cross end。伸縮項(xiàng)目在主軸上占的空間叫main size。在交叉軸上占據(jù)的空間叫cross size。
(1)flexDirection改變主軸方向
const styles = StyleSheet.create({
???? container:{
???????????? flexDirection:'row'//默認(rèn)主軸水平方向
???????????? //flexDirection:'column'? 主軸縱向方向
????? }
})
(2)flexWrap水平折行
const styles = StyleSheet.create({
??????? container:{
?????????????? flexDirection:'row', //默認(rèn)主軸水平方向
?????????????? flexWrap:'wrap'????? //默認(rèn)nowrap 不折行
????? }
})
(3)justifyContent定義伸縮項(xiàng)目沿主軸線對齊方式
const styles = StyleSheet.create({
???? container:{
?????????? flexDirection:'row', //默認(rèn)主軸水平方向
??????????? justifyContent:'flex-start'? //從左向右排列
?????????? //justifyContent:'flex-end'?? //從右向左排列
????????? //justifyContent:'center'?? //主軸線中心排列
???????? //justifyContent:'space-between'? //從主軸線兩邊開始排列
? ? ? ? //justifyContent:'space-around'?? //均分排列
??? }
})
(4)alignItems定義交叉軸關(guān)系
const styles = StyleSheet.create({
??? container:{
? ? ?? ? flexDirection:'column',? 主軸縱向方向
? ? ? ?? alignItems:'flex-start' //默認(rèn)交叉軸左邊對齊
? ? ? ?? //alignItems:'flex-end' //交叉軸右邊對齊
?? ? ?? // alignItems:'center' //交叉軸中心對齊
? ? ??? // alignItems:'streach' //沒有明顯效果
? }
})
(5)flex（數(shù)值型屬性值）用于收縮項(xiàng)目盡可能向右擴(kuò)展
?? style={flex:1}
