FlexBox（弹性框布局）：英文全称the flexible box Module，FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。其主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。注：FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working Draft)阶段，并不是所有的浏览器都支持Flexbox。
在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，显示的效果。
为了更好的理解与应用FlexBox，我们先看一下FlexBox所具有的属性。
在学习属性之前，让我们先了解一个概念：主轴和侧轴。
如图：主轴即水平方向的轴线，可以理解成横轴，侧轴垂直于主轴，可以理解为竖轴。
flexDirection该属性确定了主轴方向。
属性名说明row(默认)主轴方向为水平，起点在左端row- reverse主轴方向为水平，起点在右端column主轴方向为垂直，起点在上端column-reverse主轴方向为垂直，起点在下端justifyContent该属性确定了组件在主轴方向上的对齐方式。
属性名说明flex-start(默认)组件沿着主轴方向的起始位置靠齐flex-end组件沿着主轴方向的结束位置靠齐，和flex-start相反space-between组件在主轴方向上两端对齐，其中的间隔相等space-around组件会平均分配在主轴方向上，两端保留一定的位置空间alignItems该属性确定了组件在侧轴方向上的对齐方式。
属性名说明flex-start组件沿着侧轴上的起点对齐flex-end组件沿着侧轴上的终点对齐center组价在侧轴方向上居中对齐stretch(默认)组件在侧轴方向上占满flexWrap该属性主要用作换行，默认情况下，项目都排列在一条线上，放不下的部分则不放置，flexWap就是定义是否换行的。。
属性名说明nowrap(默认)不换行wrap 换行，第一行在上方wrap-reverse 换行，第一行在下方在React Native中尺寸是没有单位的，它代表了设备独立像素。有点类似于Android的设备像素。如：
<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}> <Text style={ {fontSize:16,margin:20}}>尺寸</Text> </View>上诉代码：运行在Android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变。
虽然React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。但是在某些方面还是有细微区别的：
flexDirection: React Native中默认为flexDirection:'column'，在Web CSS中默认为flex-direction:'row' alignItems: React Native中默认为alignItems:'stretch'，在Web CSS中默认align-items:'flex-start' flex: React Native中flex只接受一个参数，而Web Css的flex可以接受多参数，如:flex: 2 2 10% RN不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink以下属性是React Native所支持的Flex属性。
该属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。
属性名说明flex-start(默认)从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。center伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。space-between在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。space-around在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。代码示例：
<View style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}> ··· </View>属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。属性请参照本文开头的讲解。代码示例：
<View style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}> ··· </View>该属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems 属性。
属性名说明auto(默认)元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"stretch 元素被拉伸以适应容器center元素位于容器的中心flex-start元素位于容器的开头flex-end元素位于容器的结尾代码示例：
<View style={ {alignSelf:'baseline',width:60,height: 20,backgroundColor:"darkcyan",margin:5}}> <Text style={ {fontSize:16}}>1</Text> </View>该属性定义了一个可伸缩元素的能力，默认为0。类似于比重这么一个概念（因其位于父视图下面，所以比重相当于所占的百分比）。
代码示例：
<View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}> <View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}> <Text style={ {fontSize:16}}>flex:1</Text> </View> <View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}> <Text style={ {fontSize:16}}>flex:2</Text> </View> <View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}> <Text style={ {fontSize:16}}>flex:3</Text> </View> </View>