Flex布局

FlexBox

主轴与副轴

主轴：就是横轴，方向是从上到下，副轴：是纵轴，方向从左到右。

flexDirection：子视图的排列方式，有row，column，column-reverse，row-reverse.

flexwrap：子元素是否允许多行排列，wrap，nowrap。

justifycontent：主轴空间的分配。

* flex-start：伸缩项目与父容器左端靠齐。

* flex-end：与父容器右端靠齐。

* center：水平居中。

* space-between：第一个子组件位于父容器左端，最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上。

* space-around：所有子组件平均分配在父容器的水平方向上，左右都有留空隙。

alignSelf

该属性用来设置单独组件的竖直对齐方式，与alignItem有点像。有五个属性可以设置，auto，flex-start，flex-end，center，streth。

* auto:按照自身设置的宽高来显示，如果没设置，效果跟streth一样。

* flex-start:与父容器顶部对齐。

* flex-end:与父容器底部对齐。

* center:位于垂直位置。

* streth:垂直拉伸。

flex

flex指设置伸缩项目的伸缩样式，可以把它类比成android中的weight属性。