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 (
            
                

                
                

                
                

                
            
        );
    }
}

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生效，子元素在次轴方向不能有固定的尺寸