flex布局

• flexDirection
  作用：决定布局的主轴
  column：从上往下堆叠 主轴：纵向 默认值
  row ： 从左至右堆叠 主轴：横向
  column.png
  row.png
• justifyContent
  作用：决定子元素沿着 主轴 方向的排列方式

flex-start:从主轴处开始

column_start.png
row_start.png

flex-end:从主轴结束处开始

column_end.png row_end.png

center:主轴中心部

colmun_center.png
row_center.png

space-around:

column_around.png
row_around.png
space-between
column_between.png row_between.png

space-evenly

column_evenly.png
row_evenly.png
补充内容：
space-between
元素会平均地分布在行（列）里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start';超过一个元素，则先确定首末元素的位置，然后再均分剩余空白位置
0-x-xx-0
space-around
弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
x-2x-2x-x
space-evenly
均匀分布所有
x-x-x-x

代码例子：

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
import React, { Component } from 'react';
import { StyleSheet,View } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style = {S.container}>
                <View style = {S.subBox}>

                </View>
                <View style = {S.centerBox}>

                </View>
                <View style = {S.bottomBox}>

                </View>
            </View>
        );
    }
}

const S = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'pink',
        flexDirection: 'column',
//        flexDirection: 'row',
        justifyContent: 'flex-start',
//        justifyContent: 'flex-end',
//        justifyContent: 'center',
//        justifyContent: 'space-around',
//        justifyContent: 'space-between',
//        justifyContent: 'space-evenly',
     
    },
    subBox:{
        height:100,
        width: 100,
        backgroundColor: 'red'
    },
    centerBox:{
        height:100,
        width:100,
        backgroundColor:'blue',
    },
    bottomBox:{
        height:100,
        width:100,
        backgroundColor:'yellow',
    },
});

• alingItems
  作用：决定子元素沿着次轴的排列方式
  1 flex-start
  2 flex-end
  3 center
  4 stretch
  注意：若要stretch生效，子元素在次轴方向不能有固定的尺寸