效果：
stretch（默认):如果项目没有设置高度或设置为 auto，将占满整个容器高度
container: {
backgroundColor:'blue',
注释掉高度
// height:Dimensions.get('window').height,
// width:Dimensions.get('window').width,
// 设置项目在侧轴上如何对齐
alignItems:'stretch'
},
效果：
flexWrap（默认情况下，项目都排在一条轴线上，flex-wrap属性定义如果一条轴线排不下，如何换行）nowrap（默认）：不换行
container: {
backgroundColor:'blue',
height:Dimensions.get('window').height,
width:Dimensions.get('window').width,
// 设置主轴方向
flexDirection:'row',
// 设置换行的方式
flexWrap:'nowrap'
},
效果：
wrap：换行，第一行在上方
container: {
backgroundColor:'blue',
height:Dimensions.get('window').height,
width:Dimensions.get('window').width,
// 设置主轴方向
flexDirection:'row',
// 设置换行的方式
flexWrap:'wrap'
},
效果：
FlexBox 常用元素属性flex（flex-grow、flex-shrink、flex-basis三个属性的缩写，第二个参数和第三个参数是可选参数）：默认值为 "0 1 auto"
宽度 = 弹性宽度 * (flexGrow / sum(flexGorw))（重要）
先来做一下实验，看看flex到底是干嘛的，首先，我们先初始化一个新视图，便于理解
// 入口
export default class TestRN extends Component {
render() {
return (
<View style={styles.container}>
<View style={{backgroundColor:'red', height:60, width:60}}></View>
<View style={{backgroundColor:'green', height:60, width:60}}></View>
<View style={{backgroundColor:'yellow', height:60, width:60}}></View>
</View>
);
}
}
// 样式
const styles = StyleSheet.create({
container: {
backgroundColor:'blue',
flex:1,
// 设置主轴方向为水平,起点在左
flexDirection:'row'
},
});
