一、什么是FlexBox

            FlexBox布局即弹性布局，它将使用其的元素称为容器，里面的元素称为项目，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、FlexBox主要属性

  2.1 flexDirection(设置主轴方向):  row,column

       column：设置主轴为纵向，项目按照从上至下的方式排列，类似于Android线性布局的       android:orientation="vertical"，默认主轴方向为column。

       row：设置主轴为横向，项目按照从左至右的方式排列，类似于Android线性布局的      android:orientation="horizontal"。

       在html中flexDirection还有其他几个属性，但是在reactnative里面目前只支持column跟row所以   不再阐述。

2.2 justifyContent（设置主轴对齐方式）： flex-start,flex-end,center,space-between,space-around

        flex-start:起始位置对齐，默认为flex-start对齐方式

        flex-end:结束位置对齐

        center:中间对齐

        space-between:第一个在首位置，最后一个在尾位置，中间每个项目之间保留同等的距离

        space-around:第一个隔首位置的距离等同于最后一个隔尾位置的距离，其他项目之间保留         相等的距离，其中第一个隔首位置的距离为其他项目间距离的一半

2.3 alignItems（设置侧轴对齐方式）: flex-start,flex-end,center,stretch,baseline

    flex-start:侧周首部对齐，项目从侧轴的起点边开始

    flex-end:侧轴尾部对齐，项目从侧轴的终点边结束

    center:侧轴居中对齐，项目在侧轴居中

    stretch:伸缩项目拉伸填充整个容器（如果项目设置了高度，则默认按照flex-start方式对齐）

    baseline:伸缩项目根据他们的基线对齐

2.4 align-content(适用于伸缩容器，也就是伸缩项目的父元素)

    这个属性主要用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样。著作权归作者所有。（这个属性在只有一行的容器无效）