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(伸缩项目会平均地分布在主轴线里,两端各保留一般的空间)