Flexbox在React和React Native中都是非常重要的布局方式。

需要注意的是，Flexbox有主轴侧轴的概念。在网上上默认的主轴是横轴，而手机上默认的是纵轴。在实际开发中，容器的主侧轴是可以改变的。

在React中，Flexbox有6种容器属性，6种项目属性。而在React Native中，有4个容器属性，2个项目属性，分别是：

容器属性：flexDirection   flexWrap   justifyContent  alignItems

项目属性：flex  alignSelf

下面一一介绍：

（1）flexDirection

flexDiection属性取两个值：row，column;默认的是column。

row代表横向拉伸，column代表纵向拉伸。实际起到的作用就是决定内部项目的主轴方向

（2）flexWrap

子元素超出父容器时是否换行,取值有两种：wrap,nowrap。默认是nowrap

nowrap使用

布局方向设置为横向，父容器的横向的宽度有300，但是两个子component的宽度加起来是400，如果不换行，第二个控件就会超出了。

如果设置成wrap，效果如下：

进行了换行

（3）justifyContent

justifyContent定义了项目在主轴上的对齐方式,注意，这个主轴是受flexDirection影响的。它跟alignItems是一样的，不同的是align-items的轴是跟justifyContent反着的，下面有介绍alignItems。

取值如下：flex-start,flex-end,center,space-between,space-around

(4)alignItems

justifyContent定义了项目在侧轴上的对齐方式。

取值如下：flex-start,flex-end,center,stretch

flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

居中显示

（5）flex

当一个(元素)组件，定义了flex属性时，表示该元素是可伸缩的,伸缩的方向与主轴方向一致。当然flex的属性值是大于0的时候才伸缩，其小于和等于0的时候不伸缩，例如：flex:0, flex:-1等。上面的代码，最外层的view是可伸缩的，因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1／4伸缩空间， 最后一个view占据1／2空间，具体如下图：

（6）alignSelf

alignSelf属性会覆盖容器的alignItems属性，取值和用法alignItems一样。

alignSelf的取值有五种：'auto', 'flex-start', 'flex-end', 'center', 'stretch'

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

我们在实际开发中，容器已经定义了侧轴的布局方式，但是某个Component的位置比较特殊，跟别的不一样，那么就利用alignSelf去改变自己的位置。在下面这张图中，父容器已经定了alignItems为center，按道理说内部Component在侧轴上居中显示。而在子Component定义了alignSelf为flex-start，代表与侧轴start对齐，所以最终的结果如模拟器所示