一.flexDirection

父视图布局

1.flexDirection默认侧轴从上至下排列

row:主轴(行) column侧轴(列) 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属性定义了子元素在父视图内是否允许多行排列，默认为nowrap。

nowrap flex的元素只排列在一行上，可能导致溢出
wrap flex的元素在一行排列不下时，就进行多行排列

<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）元素之间及其周围的空间，默认为flex-start。对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

flex-start(default)

从行首开始排列。每行第一个元素与行首对齐，同时所有后续的弹性元素与前一个对齐。

flex-end

从行尾开始排列。每行最后一个弹性元素与行尾对齐，其它元素与后一个对齐。

center

伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

space-around

在每行上均匀分配弹性元。相邻元素间距相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是和相邻元素之间距离的一半

space-evenly

间距都相同

space-between

在每行上均匀分配弹性元素。相邻元素间距相同。每行第一个元素到行尾的距离相同

四、alignItems

alignItems属性以与justifyContent相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。

flex-start

元素向轴起点对齐

flex-end

元素向轴终点对齐。

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器。那么两个方向上溢出距离相同

stretch

弹性元素被在侧轴方向被拉伸到与容器的高度或宽度

子视图布局

一、alignSelf

alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf属性可以重写灵活容器alignItems属性

auto(defalut)

元素继承了它的付容器的align-itemss属性。如果没有父容器则为stretch

stretch

元素被拉伸以适应容器

center

元素位于容器中心

flex-start

元素位于容器开头

flex-end

元素位于容器结尾

<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设置alignSelf属性让子视图自身不随父视图的alignItems属性布局。效果图如下

Screenshot 2019-01-02_19-43-36-712.png

二、flex

相当与iOS中子视图的比例系数

<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>

2.png
参考博客