RN布局

背景

今年以来，公司新来的总监力推ReactNative，目标是做大前端，H5选用React，客户端用ReactNative，所以我要再“复习”一下网页布局。顺便把内容记录到自己的博客中，用宝儿姐的话来说：“机智的一bi”。

内容

Flex布局：Flex是Flexible Box的缩写。设为Flex布局之后，子元素的float、clear、和verti-align属性将失效。

容器属性：
经常设置在容器上的属性有：

1
2
3
4
5
6
flexDirection   // 主轴的排列方向
flexWrap        // 沿主轴排不下的时候，如何换行
justifyContent  // 项目在主轴上的排列方式
alignItems      // 项目在交叉轴上的排列方式
alignContent    // 多根轴线的对齐方式。如果只有一根轴线，该属性不起作用
alignSelf       // 允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性

每个属性的可设置的值如下:

1
2
3
4
5
6
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'

每个属性的值的意义如下：

  1. flexDirection: 主轴的排列方向
1
2
3
4
column         // 默认的排列方式，从上往下排列
column-reverse // 从下往上排列
row            // 从左到右排列
row-reverse    // 从右到左排列
  1. flexWrap: 沿主轴排不下的时候，如何换行
1
2
3
nowrap          // 默认，不换行，可能导致溢出
wrap            // 换行，第一行在上方
wrap-reverse    // 换行，第一行在下方
  1. justifyContent: 项目在主轴上的排列方式
1
2
3
4
5
6
center          // 居中
flex-start      // 默认，左对齐
flex-end        // 右对齐
space-around    // 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
space-between   // 两端对齐，项目之间的间隔都相等，n-1个间隙
space-evenly    // 两端和项目之间的间隔都相等，n+1个间隙
  1. alignItems: 项目在与主轴垂直的交叉轴上的排列方式
1
2
3
4
5
baseline      // 项目的第一行文字的基线对齐
center        // 交叉轴中点对齐
flex-end      // 交叉轴终点对齐
flex-start    // 交叉轴起点对齐
stretch       // 默认，项目未设置高度或者设置未auto，将占满整个容器的高度
  1. alignContent: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
1
2
3
4
5
6
center        // 与交叉轴中点对齐
flex-end      // 与交叉轴的终点对齐
flex-start    // 与交叉轴起点对齐
space-around  // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
space-between // 与交叉轴两端对齐，轴线之间的间隔平均分布
stretch       // 默认，轴线占满整个交叉轴
  1. alignSelf: 允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性。
1
2
3
4
5
6
auto          // 按照自身设置的宽高来显示，如果没设置，效果跟stretch一样
baseline      // 项目第一行文字的基线对齐
center        // 位于中间位置
flex-end      // 与父容器底部对齐
flex-start    // 与父容器顶部对齐
stretch       // 交叉轴拉伸，不设置具体的width/height的时候stretch才有效果
flexDirection: 'column'
flexDirection: 'column-reverse'
flexDirection: 'row'
flexDirection: 'row'

来源