flex弹性盒子模型

##############伸缩容器的属性

display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */

display: -moz-box;    /* 老版本语法: Firefox (buggy) */

display: -ms-flexbox;  /* 混合版本语法: IE 10 */

display: -webkit-flex;  /* 新版本语法： Chrome 21+ */

display: flex;      /* 新版本语法： Opera 12.1, Firefox 22+ */

################

1.display:flex| inline-flex

块级伸缩容器      行级伸缩容器

2.flex-direction

指定主轴方向 flex-directiion:row | row-reverse |column | column-reverse

3.flex-wrap

伸缩容器在主轴先方向空间不足的情况下，是否换行及改如何换行

flex-wrap:nowrap | wrap | wrap-reverse

4.flex-flow flex-direction与flex-wrap的缩写  row nowrap

5.justify-content

    定义伸缩项目的对齐方式 flex-start | flex-end | center |space-between | space-around

                        起始位置      结束位置    居中    平均分部        平均分部两端保留

6.align-items

用来定义伸缩项目在容器交叉轴的对齐方式

align-items:flex-statr| flex-end|center|baseline |stretch

                                        基准线    拉伸

7.align-content

调整伸缩项目出现换行后在交叉线上的对齐方式

flex-start | flex-end | center |space-between | space-around

#############伸缩项目的属性

order

定义项目的排序顺序，数值越小越靠前，默认值为0；语法为order：整数值

2.flex-grow

定义伸缩项目的放大比例 默认值为0，即表示如果存在剩余空间，也不放大

3.flex-shrink

定义伸缩项目的收缩能力，默认值为1,

4.flex-basis

用来设置伸缩项目的基准值，剩余空间按比例进行伸缩，语法为 flex-basis:length |auto 默认值为auto

5.flex  前面的缩写

6.align-self 单独的伸缩项目的在交叉轴上的对齐方式

align-self:flex-statr| flex-end|center|baseline |stretch

                                        基准线    拉伸

RN主要支持flexbox 的如下6个属性

1.alginItems:align-items:flex-statr| flex-end|center |stretch

2.alignSelf:auto|flex-statr| flex-end|center|stretch

3.flex

4.fleDirection

5.flewWrap

6.justifyContent -->