flex-box 伸缩项目属性

支持的属性：

order
flex-grow
flex-shrink
flex-basis
flex
algin-self

1、
order : 定义了项目的排列顺序，数值越小，排列越是靠前、默认值是0；
order :interger

2.flex-grow
项目的放大比例，默认值是0，如果存在剩余空间，也是不放大的；
flex-grow设置1 ，每个项目将会设置伸缩项目将设置一个大小相等的剩余空间；

3、
flex-shrink 伸缩项目的收缩能力.

4、
flex-basis: 设置伸缩项目的基准值，剩余的空间按照比例进行伸缩；
flex-basis:lengh:auto

5、
flex ：该属性是flex-grow ,flex-shrink ,flex-basis 三个属性的缩写；
flex:name | flex-grow [flex-shrink][flex-basis]
默认值是：0，1，auto
注意：当元素设置为flex=1的时候，该元素会把伸缩容器的空间占满，实质就是：flex-grow:1;
快捷值：auto(0,1,auto) 和none (0,0,auto)

6、
align-self 设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，
align-self: auto | flex-start | flex-end | center | baseline | stretch
auto: 伸缩项目会按照自身设置的高度进行显示，如果没有设置，则按照stretch来计算其值；
flex-start: 伸缩项目向交叉轴开始的位置对齐；
flex-end: 伸缩项目向交叉轴结束的位置对齐；
center: 伸缩项目向交叉轴中心位置对齐；
baseline: 伸缩项目按基线对齐；
stretch :伸缩项目在交叉轴方向上占满容器；

总结： 这里都是一个伸缩项目item的属性的设置。

flexbox总结：
1）行线上面的布局
2）纵轴线上的布局
3）层次关系

react-native中使用flexbox 进行布局，支持的属性主要是有：（分别对应前面讲的属性）
alignItems（align-items）
alignself(align-self)
flex(flex)
flexDirection (flex-direction)
flexwrap (flex-wrap)
justifyContent (justify-content)
(在native上的和前面的区别就是写法变成了“驼峰式”）

注意react-native 中使用flex布局的时候，后面的属性和前面的重复的时候，就会覆盖掉前面的值；