React Native 之 flexbox布局

React Native中支持的flexbox属性

justifyContent : 定义伸缩项目沿主轴线上的对齐方式。

flex-start：

flex-end：

center：

space-between: 根据属性值的字面意思，剩余的空间留在伸缩项目之间，而且是平均分配，第一个伸缩项目在主轴线的开始位置和main start没有间隙，最后一个伸缩项目在主轴线的结束位置和main end没有间隙。

space-around：根据属性值的字面意思也很好理解，剩余的空间环绕着伸缩项目，伸缩项目之间平均分配剩余空间，两端伸缩项目距离主轴线的main start和main end，保留一半的空间。

alignItems： 定义伸缩项目在伸缩容器的交叉轴上的对齐方式。

flex-start：

flex-end：

center：

baseline： 单词的解释是基准线，在交叉轴方向沿基准线中心对齐（这块理解的不好）。

stretch：伸展，伸缩项目在交叉轴方向拉伸填充整个伸缩容器。（想看到这个属性值的效果，伸缩项目不能设置交叉轴上的长度）。

flexDirection：指定主轴的方向，与LinearLayout中的android:orientation属性相似。

flex： 此属性，由三个属性构成，flex-grow定义了方法比例，flex-shrink定义了缩小比例，flex-basis定义了指定大小，语法：flex：flex-grow flex-shrink flex-basis。如flex：1 ，填充满伸缩容器剩余的空间，很类似于android:weight 属性，即权重，如果希望几个View平均分配整个屏幕宽，可以设置每个item的view的flex为1。

position：“relative”和 “absolute”

borderRadius : 设置View圆角大小，相当于Android中的CardView能力，超赞。

注：justifyContent和alignItems可以定义控件中文字内容的显示位置，等同于我们在Android Native开发中LinearLayout的android:gravity属性的效果。