采用Flex布局的元素，称为Flex容器（flex container），简称容器，它的所有子元素则是Flex容器的成员称为Flex项目（flex item），简称项目
能解决什么问题？
浮动布局，各种机型的视频，水平和垂直居中，自动分配宽度
案例分析
export default class flextest extends Component {
render() {
return (
<View style={{flex:1}}>
<View style={styles.view1}></View>
<View style={styles.view2}></View>
<View style={styles.view3}></View>
</View>
)
}
}
样式文件
const styles = StyleSheet.create({
view1:{
width:50,
height:50,
backgroundColor:'#f5bb0a',
},
view2:{
width:50,
height:50,
backgroundColor:'#ff0000',
},
view3:{
width:50,
height:50,
backgroundColor:'#408080',
}
});
flex 布局 flexDirection 决定主轴的方向，默认是clounm，垂直重上到下
此时样式为
修改
<View style={{flex:1,flexDirection:'column-reverse'}}>表示主轴垂直反转，从下到上了
修改
<View style={{flex:1,flexDirection:'row'}}>表示主轴是水平排列，从左到右
修改
<View style={{flex:1,flexDirection:'row-reverse'}}>表示主轴是水平排列，从左到右
总结：
1.flexDirection
flexDirection属性可以决定主轴的方向（即项目的排列方向），它有以下取值：
- column(默认值)：主轴为垂直方向，起点在顶端。
- row：主轴为水平方向，起点在左端。
- column-reverse：主轴为垂直方向，起点在下端。
- row-reverse：主轴为水平方向，起点在右端。
注意-=当你调转行或列的方向后，主轴，交叉轴flex-start和flex-end对应的方向也被调转
参考资料资料
排序方式案例，已默认主轴为例
<View style={{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
?思考，把3个色块水平放到底部，顺序不变，并且 等比排放怎么来放置？
首先3个色块是水平的，主轴就是flexDirection=row,设置主轴排序方式两端对齐，并且项目间隔相等，使用space-between，交叉轴现在是垂直方向了，使用alignItems，flex-end跟父容器的底部对齐
<View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'flex-end'}}>
2.justifyContent 和 alignItems 分别制定主轴和交叉轴的排列方式
1)justifyContent属性用于定义项目在主轴上的对齐方式
- flex-start（默认值）：项目与父容器左端对齐。
- flex-end：项目与父容器右端对齐。
- center：居中。
- space-between： 两端对齐，并且项目间隔相等。//相当于权重
- space-around：每个项目的两侧间隔相等，因此，项目之间的间隔是项目与父容器边缘间隔的2倍。
2)alignItems用于定义项目在交叉轴上的对齐方式。
flex-start：项目与父容器的顶部对齐。
flex-end：项目与父容器的底部对齐。
center：居中。
baseline ：项目的第一行文字的基线对齐。
stretch：（默认值）如果项目未设置高度或者高度设为auto，项目将占满整个容器的高度，否则该取值不会生效。
3.alignContent
alignContent用于多行项目在交叉轴上的对齐方式。如果项目只有一行，该属性是不起作用的。它的取值有 flex-start 、flex-end 、 center 、space-between 、 space-around 和 stretch，只比justifyContent的取值多了一个stretch（默认值，含义和alignItems的stretch类似），alignContent的取值的含义和justifyContent的取值的含义类似
4.flexWrap
flexWrap用于设置如果一行排不下，如何换行。它的取值有以下几种：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
##############
总结：
布局的话，flex相当于把布局撑开到每部分的全部。
默认的方式数垂直，相当于android的linearlayout,
flex-direction:column === linearlayout
flex-wrap:warp 换行
justify-content(noflex=1) 定义主轴的排列方式，比如居中还是flex-left
align-content:alignContent用于多行项目在交叉轴上的对齐方式
alignItems 定义交叉轴的排列方向，
align-self 属性重写了容器的 align-items 属性。
