flex布局语法

1.flex属性 [类似weight]:

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

2. flexDirection [类似linearLayout中oritenion]在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)。

3.alignSelf:水平对齐方式

alignSelf的对齐方式主要有四种：flex-start、 flex-end、 center、 auto、 stretch。看看代码，应该就很清楚了：

alignItems与alignSelf区别: 经demo测试, 如同gravity[内部]与layout_gravity[外部];

4. justifyContent用于垂直居中，竖直方向的居上/居中/居下,类似gravity.

转自: https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb