对RN布局中flexbox规则做一个说明：
flex
felxbox是由伸缩容器和伸缩项目组成，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
flexbox中目前我掌握的几个属性包括：
felxDirection、alignItems、justfyContent、flexWrap、alignContent，基本上使用前三个就可以了。
flexDirection
flex方向，控制item的排列方向，有row（水平排列）、column(竖直排列)、row-reverse（水平从右开始排列）、column-reverse（竖直从下排列）
row的时候 水平为主轴，竖直为次轴，column时竖直为主轴，水平为次轴。
alignItems
控制item在次轴上的排列方式，主要属性包括：（以column为例）
flex-start 次轴起点开始（在水平方向上居左显示）
flex-end次轴终点开始（在水平方向上居右显示）
center次轴中间开始（在水平方向上居中显示）
stretch如果为设置次轴宽度（或高度），或者设置为auto，将占满整个容器（没有设置width，水平方向全部填充）
baseline第一行文字的基线对齐
效果图如下：
alignItems
justfyContent
主轴方向的对齐方式（以column为例）
flex-start起始位置对齐（左对齐）
flex-end结束位置对齐（右对齐）
center中心对齐（水平居中）
space-between两端对齐，item之间间距平分
space-around每个项目两端的间隔相等
justfyContent
flexWrap
按照主轴排列，如果一行（列）排列不下时，控制第二行（列）的位置（如何换行／列）
nowrap：不换行，为默认效果
wrap：换行，依次往后排
wrap-reverse：换行，从后往前排
以row为例：
nowrap
wrap
wrap-reverse
alignContent
多条次轴线的对齐方式（如果只有一个，该属性不起作用，即不换行／列，该属性无用）
其属性值
flex-start起始位置对齐（多条次轴线左对齐）
flex-end结束位置对齐（多条次轴线右对齐）
center与交叉轴两端对齐，轴线之间的间距间隔平均分布
space-between每根轴线两侧的间隔相等
space-around轴线占满整个交叉轴，默认值
alignContent
flexFlow
有的博客上写了这个属性，经我测试暂没发现有这个属性，应该是CSSStyle里面的属性
flex
指定数字，按照比例根据父容器大小来动态计算大小，其中父容器必须有固定的width 和height，或者设定flex，要不父容器尺寸为0，子组件设置flex也没有效果（这是废话）
数值越大，显示空间越大
alignSelf
决定元素在父元素次轴方向的排列顺序（设置在子元素上），会覆盖父容器alignItems属性，默认值为auto
alignSelfe num('auto', 'flex-start', 'flex-end', 'center', 'stretch')
ps：以上内容我亲自测试过。
其他细节参考如下：
网友评论