RN布局
RN布局
背景
今年以来，公司新来的总监力推ReactNative，目标是做大前端，H5选用React，客户端用ReactNative，所以我要再“复习”一下网页布局。顺便把内容记录到自己的博客中，用宝儿姐的话来说：“机智的一bi”。
内容
Flex布局：Flex是Flexible Box的缩写。设为Flex布局之后，子元素的float、clear、和verti-align属性将失效。
容器属性：
经常设置在容器上的属性有：
flexDirection // 主轴的排列方向
flexWrap // 沿主轴排不下的时候，如何换行
justifyContent // 项目在主轴上的排列方式
alignItems // 项目在交叉轴上的排列方式
alignContent // 多根轴线的对齐方式。如果只有一根轴线，该属性不起作用
alignSelf // 允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性
每个属性的可设置的值如下:
flexDirection: 'column' | 'column-reverse' | 'row' | 'row-reverse'
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'
justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly'
alignItems: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
alignContent: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'
alignSelf: 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
每个属性的值的意义如下：
- flexDirection: 主轴的排列方向
column // 默认的排列方式，从上往下排列
column-reverse // 从下往上排列
row // 从左到右排列
row-reverse // 从右到左排列
- flexWrap: 沿主轴排不下的时候，如何换行
nowrap // 默认，不换行，可能导致溢出
wrap // 换行，第一行在上方
wrap-reverse // 换行，第一行在下方
- justifyContent: 项目在主轴上的排列方式
center // 居中
flex-start // 默认，左对齐
flex-end // 右对齐
space-around // 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
space-between // 两端对齐，项目之间的间隔都相等，n-1个间隙
space-evenly // 两端和项目之间的间隔都相等，n+1个间隙
- alignItems: 项目在与主轴垂直的交叉轴上的排列方式
baseline // 项目的第一行文字的基线对齐
center // 交叉轴中点对齐
flex-end // 交叉轴终点对齐
flex-start // 交叉轴起点对齐
stretch // 默认，项目未设置高度或者设置未auto，将占满整个容器的高度
- alignContent: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
center // 与交叉轴中点对齐
flex-end // 与交叉轴的终点对齐
flex-start // 与交叉轴起点对齐
space-around // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
space-between // 与交叉轴两端对齐，轴线之间的间隔平均分布
stretch // 默认，轴线占满整个交叉轴
- alignSelf: 允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性。
auto // 按照自身设置的宽高来显示，如果没设置，效果跟stretch一样
baseline // 项目第一行文字的基线对齐
center // 位于中间位置
flex-end // 与父容器底部对齐
flex-start // 与父容器顶部对齐
stretch // 交叉轴拉伸，不设置具体的width/height的时候stretch才有效果
<table>
<tr>
<td ><center><img src="https://i.loli.net/2020/09/22/tFuAimYg7zXnseE.jpg" width="50%" ><center>flexDirection: 'column'</center></center></td>
<td ><center><img src="https://i.loli.net/2020/09/22/YyE7tXM6p85KCWD.jpg" ><center>flexDirection: 'column-reverse'</center></center></td>
<td ><center><img src="https://i.loli.net/2020/09/22/ZRT2yjLVPIQnkuE.jpg" width="50%" ><center>flexDirection: 'row'</center></center></td>
<td ><center><img src="https://i.loli.net/2020/09/22/sYhuZaU1mw6ykV3.jpg" ><center>flexDirection: 'row'</center></center></td>
</tr>
</table>
