RN学习笔记之Flexbox布局

对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在次轴上的排列方式，主要属性包括：（以row为例）

flex-start 次轴起点开始（在垂直方向居top显示）

flex-end次轴终点开始（在垂直方向上居bottom显示）

center次轴中间开始（在垂直方向上居中显示）

stretch如果为设置次轴宽度（或高度），或者设置为auto，将占满整个容器（没有设置height，垂直方向全部填充）

baseline第一行文字的基线对齐

效果图如下：

alignItems

justfyContent

主轴方向的对齐方式（以row为例）

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：以上内容我亲自测试过。

其他细节参考如下：

FlexBox介绍

FlexBox-RN中文网