1. 什么是Flexbox？
简单来说Flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为Flexbox是CSS领域类似Android中 LinearLayout的一种布局，但是要比 LinearLayout要强大的多。
2. ReactNative中的Flexbox
总所周知，移动端在使用和操作习惯与PC端有着截然的不同，这就注定了它和WEB端在布局方式以及复杂度方面有着巨大的差别。所以在ReactNative中，官方对Flexbox做了一些阉割，以用来适应移动端的布局方式。
关于完整的Flexbox布局教程，可以参考阮一峰的Flex 布局教程：语法篇。
3. ReactNative中Flexbox常用的几个属性
- 容器属性
flexDirection、justifyContent、alignItems、flexWrap - 元素属性
alignSelf、flex、position
本文只介绍重点的几个属性，其他类似marginLeft、padding等，无论你之前是做网页开发，还是做原生开发，应该都非常熟悉，所以这里不做过多说明，大家稍微尝试看一下效果就知道了。另外，更多属性支持请查看官方文档。
在我们介绍这些属性之前，有一个概念，需要跟大家讲解下，那就是主轴和交叉轴。上面的多数属性和这个概念有直接关系，起初学习Flexbox可能比较困惑，有可能就是没理解清楚这个概念。
主轴和交叉轴是由flexDirection这个属性来决定的，让我们首先来看下flexDirection
-
flexDirection：这个属性决定了子View排列的方向，类似Android中LinearLayout的orientation属性，它有两个值：
row：横向排列，主轴为水平方向，交叉轴为垂直方向；
column：竖直排列，主轴为垂直方向，交叉轴为水平方向。
其中，默认值是column。
flexDirection.png
- justifyContent：设置子布局在主轴方向位置
justifyContent.png
- alignItems：设置子布局在交叉轴方向位置
alignItems.png
- flexWrap：水平或垂直布局时：如果子View放不下，则自动换行, 默认为'nowrap'(不换行)
flexWrap.png
- alignSelf：设置子布局在交叉轴方向位置
alignSelf.png
- flex：权重，类似Android中weight
flex.png
-
position：定位模式，分为absolute和relative两种
absolute：绝对定位，相对于原点（左上角）<Text style={{ fontSize: 20, textAlign: 'center', backgroundColor: '#0000FF', color: '#FFFFFF', position: 'absolute', left: 100, top: 100 }}> B </Text>
absolute.png
relative：相对定位，相对于当前位置
<Text style={{
fontSize: 20,
textAlign: 'center',
backgroundColor: '#0000FF',
color: '#FFFFFF',
position: 'relative',
left: 100,
top: 100
}}>
B
</Text>
relative.png
