跳到主内容

使用 Flexbox 布局

组件可以使用 Flexbox 算法指定其子元素的布局。Flexbox 旨在为不同屏幕尺寸提供一致的布局。

通常,你会结合使用 flexDirectionalignItemsjustifyContent 来实现正确的布局。

注意

Flexbox 在 React Native 中的工作方式与在 Web CSS 中相同,但有少数例外。默认值不同,flexDirection 默认为 column 而不是 rowalignContent 默认为 flex-start 而不是 stretchflexShrink 默认为 0 而不是 1flex 参数只支持单个数字。

Flex

flex 将定义你的项目如何“填充”主轴上的可用空间。空间将根据每个元素的 flex 属性进行划分。

在下面的示例中,红色、橙色和绿色的视图都是设置了 flex: 1 的容器视图中的子视图。红色视图使用 flex: 1,橙色视图使用 flex: 2,绿色视图使用 flex: 31+2+3 = 6,这意味着红色视图将获得 1/6 的空间,橙色视图获得 2/6 的空间,绿色视图获得 3/6 的空间。

Flex 方向

flexDirection 控制节点子元素的布局方向。这也被称为主轴。交叉轴是垂直于主轴的轴,或者是折行排列的轴。

  • column (默认值) 将子元素从上到下对齐。如果启用了换行,则下一行将从容器顶部第一个项目的右侧开始。

  • row 将子元素从左到右对齐。如果启用了换行,则下一行将从容器左侧第一个项目的下方开始。

  • column-reverse 将子元素从下到上对齐。如果启用了换行,则下一行将从容器底部第一个项目的右侧开始。

  • row-reverse 将子元素从右到左对齐。如果启用了换行,则下一行将从容器右侧第一个项目的下方开始。

你可以在这里了解更多。

布局方向

布局 direction 指定了层级中子元素和文本的布局方向。布局方向还会影响 startend 指的是哪个边缘。默认情况下,React Native 使用 LTR 布局方向。在此模式下,start 指左侧,end 指右侧。

  • LTR (默认值) 文本和子元素从左到右布局。应用于元素开头的 margin 和 padding 将应用于左侧。

  • RTL 文本和子元素从右到左布局。应用于元素开头的 margin 和 padding 将应用于右侧。

内容对齐

justifyContent 描述了如何沿容器主轴对齐子元素。例如,你可以使用此属性将 flexDirection 设置为 row 的容器中的子元素水平居中,或将 flexDirection 设置为 column 的容器中的子元素垂直居中。

  • flex-start(默认值) 将容器的子元素对齐到容器主轴的起始位置。

  • flex-end 将容器的子元素对齐到容器主轴的结束位置。

  • center 将容器的子元素对齐到容器主轴的中心。

  • space-between 将子元素沿容器主轴均匀分布,将剩余空间分配到子元素之间。

  • space-around 将子元素沿容器主轴均匀分布,将剩余空间分配到子元素周围。与 space-between 相比,使用 space-around 会在第一个子元素的开头和最后一个子元素的末尾分配空间。

  • space-evenly 沿主轴均匀分布对齐容器内的子元素。每对相邻项目之间、主轴起始边缘与第一个项目之间,以及主轴结束边缘与最后一个项目之间的间距都完全相同。

你可以在这里了解更多。

项目对齐

alignItems 描述了如何沿容器的交叉轴对齐子元素。它与 justifyContent 非常相似,但 alignItems 作用于交叉轴,而不是主轴。

  • stretch (默认值) 拉伸容器的子元素以匹配容器交叉轴的 height

  • flex-start 将容器的子元素对齐到容器交叉轴的起始位置。

  • flex-end 将容器的子元素对齐到容器交叉轴的结束位置。

  • center 将容器的子元素对齐到容器交叉轴的中心。

  • baseline 将容器的子元素沿公共基线对齐。可以设置单个子元素作为其父元素的参考基线。

信息

为了使 stretch 生效,子元素在次轴上不能有固定的尺寸。在下面的示例中,设置 alignItems: stretch 没有任何效果,直到子元素的 width: 50 被移除。

你可以在这里了解更多。

自身对齐

alignSelf 具有与 alignItems 相同的选项和效果,但它不是影响容器内的子元素,而是可以应用于单个子元素,以改变其在其父元素内的对齐方式。alignSelf 会覆盖父元素通过 alignItems 设置的任何选项。

内容对齐

alignContent 定义了行沿交叉轴的分布。这只在项目使用 flexWrap 换行到多行时才有效。

  • flex-start (默认值) 将换行后的行对齐到容器交叉轴的起始位置。

  • flex-end 将换行后的行对齐到容器交叉轴的结束位置。

  • stretch (在 Web 上使用 Yoga 时的默认值) 拉伸换行后的行以匹配容器交叉轴的高度。

  • center 将换行后的行对齐到容器交叉轴的中心。

  • space-between 将换行后的行沿容器交叉轴均匀分布,将剩余空间分配到行之间。

  • space-around 将换行后的行沿容器交叉轴均匀分布,将剩余空间分配到行周围。容器的每端都有一个半尺寸的间距,与项目之间的间距相比。

  • space-evenly 将换行后的行沿容器交叉轴均匀分布,将剩余空间分配到行周围。每个间距大小相同。

你可以在这里了解更多。

Flex 换行

DflexWrap 属性设置在容器上,它控制当子元素沿主轴溢出容器大小时会发生什么。默认情况下,子元素被强制排成一行(这可能会收缩元素)。如果允许换行,则项目会根据需要在主轴上换行到多行。

换行时,可以使用 alignContent 来指定行在容器中的放置方式。你可以在这里了解更多。

Flex Basis、Grow 和 Shrink

  • flexBasis 是一种与轴无关的方式,用于提供项目沿主轴的默认尺寸。设置子元素的 flexBasis 类似于:如果其父元素是 flexDirection: row 的容器,则设置该子元素的 width;如果其父元素是 flexDirection: column 的容器,则设置该子元素的 height。一个项目的 flexBasis 是该项目的默认尺寸,即在执行任何 flexGrowflexShrink 计算之前的项目尺寸。

  • flexGrow 描述了容器内应沿主轴在其子元素之间分配多少空间。在布局其子元素后,容器将根据其子元素指定的 flex grow 值分配所有剩余空间。

    flexGrow 接受任何大于或等于 0 的浮点值,其中 0 是默认值。容器将根据子元素的 flexGrow 值按权重分配所有剩余空间。

  • flexShrink 描述了当子元素的总大小在主轴上溢出容器大小时,如何沿主轴收缩子元素。flexShrinkflexGrow 非常相似,如果将任何溢出大小视为负剩余空间,则可以以相同的方式理解。这两个属性通过允许子元素根据需要增长和收缩,也能很好地协同工作。

    flexShrink 接受任何大于或等于 0 的浮点值,其中 0 是默认值(在 Web 上,默认值为 1)。容器将根据子元素的 flexShrink 值按权重收缩其子元素。

你可以在这里了解更多。

行间距、列间距和间距

  • rowGap 设置元素行之间间隙(槽)的大小。

  • columnGap 设置元素列之间间隙(槽)的大小。

  • gap 设置行和列之间间隙(槽)的大小。它是 rowGapcolumnGap 的简写。

你可以将 flexWrapalignContentgap 结合使用,以在项目之间添加一致的间距。

宽度和高度

width 属性指定元素内容区域的宽度。类似地,height 属性指定元素内容区域的高度。

widthheight 都可以接受以下值

  • auto (默认值) React Native 根据元素的内容(无论是其他子元素、文本还是图像)计算元素的宽度/高度。

  • pixels 以绝对像素定义宽度/高度。根据组件上设置的其他样式,这可能是也可能不是节点的最终尺寸。

  • percentage 分别以其父元素宽度或高度的百分比定义宽度或高度。

定位

元素的 position 类型定义了它相对于自身、其父元素或其包含块的定位方式。

  • relative (默认值) 默认情况下,元素是相对定位的。这意味着元素根据正常的布局流进行定位,然后根据 toprightbottomleft 的值相对于该位置进行偏移。偏移量不影响任何兄弟元素或父元素的位置。

  • absolute 当元素进行绝对定位时,它不参与正常的布局流。相反,它独立于其兄弟元素进行布局。位置是根据 toprightbottomleft 的值确定的。这些值将使元素相对于其包含块进行定位。

  • static 当元素进行静态定位时,它根据正常的布局流进行定位,并将忽略 toprightbottomleft 的值。此 position 还会导致元素不为绝对后代形成包含块,除非存在其他覆盖样式属性(例如 transform)。这允许 absolute 元素定位到非其父元素的某个位置。请注意,static 仅在新架构中可用

包含块

元素的包含块是一个祖先元素,它控制着元素的位置和尺寸。包含块在 React Native 中的工作方式与它们在 Web 上的工作方式非常相似,由于缺少某些 Web 功能,因此进行了一些简化。

绝对定位元素的 toprightbottomleft 值将相对于其包含块。

应用于绝对定位元素的百分比长度(例如:width: '50%'padding: '10%')将相对于其包含块的大小进行计算。例如,如果包含块宽 100 点,则绝对定位元素的 width: 50% 将使其宽度为 50 点。

以下列表将帮助你确定任何给定元素的包含块

  • 如果该元素的 position 类型为 relativestatic,则其包含块是其父元素。
  • 如果该元素的 position 类型为 absolute,则其包含块是满足以下条件之一的最近祖先:
    • position 类型不是 static
    • 它具有 transform 属性

深入了解

查看交互式的 yoga 演练场,你可以用它更好地理解 flexbox。

我们已经介绍了基础知识,但布局可能还需要许多其他样式。控制布局的完整属性列表记录在此处

此外,你还可以查看Wix 工程师的一些示例。