ReactNative的flexbox

flexbox是Flexible Box的缩写,由W3C组织提出来的一种布局方案.该布局可以快速的完成各种伸缩性设计.目前主流浏览器都已支持.ReactNative也沿用此布局.

ReactNative目前主要支持flexbox的如下6个属性:

1.alignItems(该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式)

语法为:

alignItems:flex-start | flex-end | center | stretch

-flex-start(伸缩项目向交叉轴的起始位置靠齐)

-flex-end(伸缩项目向交叉轴的结束位置靠齐)

-center(伸缩项目向交叉轴的中间位置靠齐)

-stretch(伸缩项目在交叉轴方向拉伸整个伸缩容器)

2.alignSelf(该属性用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆写默认的对齐方式)

语法为：

alignSelf:auto | flex-start | flex-end | center | stretch

-auto(伸缩项目按照自身设置的宽高显示,如果没有设置,则按stretch来计算其值)

-flex-start(伸缩项目向交叉轴的起始位置靠齐)

-flex-end(伸缩项目向交叉轴的结束位置靠齐)

-center(伸缩项目向交叉轴的中间位置靠齐)

-stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)

3.flex(定义了该属性且大于0时,表示可伸缩.如果并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比)组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height,也没有设定flex,则父容器的尺寸为零.其子组件如果使用了flex,也是无法显示的.)

语法为：

flex:number

4.flexDirection(该属性用于指定主轴的方向)

语法为:

flex-direction:row | column

-row(容器主轴为水平方向,伸缩项目从左向右排列)

-column(默认值,容器主轴为垂直方向,伸缩项目从上到下排列)

5.flexWrap(该属性用于指定伸缩容器的主轴线方向空间不足的情况下,是否换行)

语法为:

flexWrap:wrap | nowrap

-wrap(伸缩容器在空间不足的情况下允许换行)

-nowrap(即使空间不足,伸缩容器也不允许换行)

6.justifyContent(该属性用来定义伸缩项目沿主轴的对齐方式)

语法为:

justiftContent:flex-start | flex-end | cneter | space-between | space-around

-flex-start(伸缩项目向主轴的起始位置靠齐)

-flex-end(伸缩项目向主轴的结束位置靠齐)

-cneter(伸缩项目向主轴的中间位置靠齐)

-space-between(伸缩项目会平均的分布在主轴线里.第一个伸缩项目在主轴的开始  位置,最后一个伸缩项目在主轴的终点位置)

-space-around(伸缩项目会平均地分布在主轴线里,两端各保留一般的空间)