ReactNative flexbox布局

采用Flex布局的元素，称为Flex容器（flex container），简称容器，它的所有子元素则是Flex容器的成员称为Flex项目（flex item），简称项目

image.png

能解决什么问题？
浮动布局，各种机型的视频，水平和垂直居中，自动分配宽度

案例分析

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，垂直重上到下

此时样式为

image.png

修改<View style={{flex:1,flexDirection:'column-reverse'}}>表示主轴垂直反转，从下到上了

image.png

修改<View style={{flex:1,flexDirection:'row'}}>表示主轴是水平排列，从左到右

image.png

修改<View style={{flex:1,flexDirection:'row-reverse'}}>表示主轴是水平排列，从左到右

image.png

总结：

1.flexDirection

flexDirection属性可以决定主轴的方向（即项目的排列方向），它有以下取值：

column(默认值)：主轴为垂直方向，起点在顶端。
row：主轴为水平方向，起点在左端。
column-reverse：主轴为垂直方向，起点在下端。
row-reverse：主轴为水平方向，起点在右端。

注意-=当你调转行或列的方向后，主轴，交叉轴flex-start和flex-end对应的方向也被调转

image.png

参考资料资料

排序方式案例，已默认主轴为例

<View style={{flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center'}}>

image.png

?思考，把3个色块水平放到底部，顺序不变，并且等比排放怎么来放置？

image.png

首先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 属性。

ReactNative flexbox布局