一、FlexBox
弹性盒子模型（The Flexible Box Module），又叫FlexBox，意为“弹性布局”，旨在通过弹性的方式来对齐和布局容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间
二、FlexBox的常用属性
2.1、容器属性
flexDirection：该属性决定主轴的方向（即项目的排列方向）
row：主轴为水平方向,起点在左端
row-reverse：主轴为水平方向，起点在右端
column（默认值）：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
justifyContent：定义了伸缩项目在主轴线的对齐方式
flex-start（默认值）：伸缩项目向一行的起始位置靠齐
flex-end：伸缩项目向一行的中间位置靠齐
center：伸缩项目向一行的中间位置靠齐
space-between：两端对齐，项目之间的间隔相等
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间
alignItems：定义项目在交叉轴上如何对齐，可以把其想象成测轴（垂直于主轴）的对齐方式
alignItems的值：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。（适用于网页，RN不适用）
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
alignSelf：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
flexWrap：默认情况下，项目都排在一条线（又称轴线）上
flexWrap的值：
nowrap：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方。（和wrap相反）
