flexBox布局

常用的属性：

属性1. flexDirection 该属性取决于主轴的方向

row：主轴为水平方向起点在最左侧

row-reverse：主轴为水平方向起点在最右边

column（默认）：主轴为竖直方向起点在最上方

column-reverse：主轴在竖直方向起点在最下方

图1

要改变其布局方式首先要确定其主轴方向在样式里边进行修改如下：

图2

注：确定了主view的主轴方向子view的方向也随之确定如要改变只需改变子view的样式即可

属性2.justifyContent:决定主轴的对齐方式

flex-start：伸缩项目向一行的开始位置对齐

图3

flex-end:伸缩项目向一行的结束位置对齐

图4

center：伸缩项目向中间对齐

图5

space-between:两端对齐项目中间的间距相等

图6

space-around:平均分配两端保留一半的空间

图7

属性3:设置侧轴的对齐方式alignItems

flex-start：顶部对齐。   flex-end：底部对齐。 center：居中。  stretch：（默认）拉伸和父视图的高度一样

属性4:flexWrap 默认情况下的项目都在一条直线上超出了父视图不会进行换行的操作

wrap：换行                nowrap：不换行（默认）

元素属性

1.flex:设置父视图与本身控件的百分比

2.alignSelf：设置其中某个控件的侧轴对齐可以覆盖alignItems