因为之前的原因，换了一份工作，在新公司目前暂时应该是负责大前端的开发的工作。重新学习了一下JS语法，可能以后的变化的过程就是从Java转到了JS开发了。闲话少说，今天的重点在于介绍FlexBox布局在React-Native中的使用。
先说两句，1. 因为之前做Android开发所以在介绍中会做类比，其实你会发现界面的显示其实都大同小异。2 . Flex其实是用在前端的页面显示，在React-Native的界面中其实只是部分支持Flew的属性。
我们大体将属性分为两种 一种为容器（Group）属性，另外一种为视图(View)属性 ，一般来说View主要是作为容器的子布局。
- 4种容器属性
- alignItems
- flexDirection
- flexWrap
- justifyContent
- 2种视图布局
- flex
- alignSelf
首先介绍容器属性
flexDirection : 在React-Native中 默认属性为colum 主要指向主线轴的排列方向。
- row 横向方向
- column 默认 垂直方向
justifyContent: 表示伸缩容器在 主线轴上的对齐方式
- flex-start
- flex-end
- center
- space-between
- space-around
alignItems：表示view在伸缩容器在交叉轴上的对齐方式
- flex-start
- flex-end
- center
- stretch
flexWrap； 表示容器在主线轴如果空间不足的时候 是否换行
- wrap 换行
- nowrap 不换行
接下来为视图属性
flex: 表示的是容器所占父容器的百分比
- number 默认为1 表示占据父容器的所有多余空间
algnSelf：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- auto 按照自己的宽高来显示
- flex-start view在交叉轴的开始位置对齐
- flex-end View在交叉轴的结束位置来对齐
- center 居中
- stretch 拉升铺满 交叉轴的剩余空间
