使用 Flexbox 进行布局

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

通常会结合使用 flexDirection、alignItems 和 justifyContent 来实现正确的布局。

警告

Flexbox 在 React Native 中的工作方式与 Web 上的 CSS 相同，但有一些例外。 默认值有所不同：flexDirection 默认为 column 而不是 row，alignContent 默认为 flex-start 而不是 stretch，flexShrink 默认为 0 而不是 1，并且 flex 参数仅支持单个数字。

Flex

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

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

Flex Direction

flexDirection 控制节点子元素的布局方向。这也称为主轴。交叉轴是与主轴垂直的轴，或者说是换行所沿的轴。

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

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

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

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

你可以在此处了解更多信息。

TypeScript

JavaScript

Layout Direction

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

• LTR（默认值）文本和子元素从左到右布局。应用于元素起始端的外边距和内边距会应用于左侧。

• RTL 文本和子元素从右到左布局。应用于元素起始端的外边距和内边距会应用于右侧。

TypeScript

JavaScript

Justify Content

justifyContent 描述如何沿容器的主轴对齐子元素。例如，当容器的 flexDirection 设置为 row 时，可以使用此属性在容器内水平居中子元素；当 flexDirection 设置为 column 时，则可以在容器内垂直居中子元素。

• flex-start（默认值）将容器的子元素对齐到容器主轴的起点。

• flex-end 将容器的子元素对齐到容器主轴的终点。

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

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

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

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

你可以在此处了解更多信息。

TypeScript

JavaScript

Align Items

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

• stretch（默认值）拉伸容器的子元素，使其匹配容器交叉轴的 height。

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

• flex-end 将容器的子元素对齐到容器交叉轴的终点。

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

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

信息

要使 stretch 生效，子元素在次轴方向上不能具有固定尺寸。在以下示例中，设置 alignItems: stretch 不会产生任何效果，直到移除子元素中的 width: 50。

你可以在此处了解更多信息。

TypeScript

JavaScript

Align Self

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

TypeScript

JavaScript

Align Content

alignContent 定义沿交叉轴的行分布方式。只有当项目使用 flexWrap 换行为多行时，此属性才会生效。

• flex-start（默认值）将换行后的各行对齐到容器交叉轴的起点。

• flex-end 将换行后的各行对齐到容器交叉轴的终点。

• stretch（在 Web 上使用 Yoga 时的默认值）拉伸换行后的各行，使其匹配容器交叉轴的高度。

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

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

• space-around 沿容器交叉轴均匀分布换行后的各行，将剩余空间分配到各行周围。容器两端的空间是项目之间空间的一半。

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

你可以在此处了解更多信息。

TypeScript

JavaScript

Flex Wrap

flexWrap 属性设置在容器上，用于控制当子元素沿主轴溢出容器大小时会发生什么。默认情况下，子元素会被强制放在单行中（这可能会使元素缩小）。如果允许换行，则会根据需要沿主轴将项目换成多行。

换行时，可以使用 alignContent 指定各行在容器中的放置方式。你可以在此处了解更多信息。

TypeScript

JavaScript

Flex 基础、增长和收缩

• flexBasis 是一种与轴无关的方式，用于提供项目沿主轴的默认大小。如果父元素是具有 flexDirection: row 的容器，设置子元素的 flexBasis 类似于设置该子元素的 width；如果父元素是具有 flexDirection: column 的容器，则类似于设置该子元素的 height。项目的 flexBasis 是该项目的默认大小，也就是执行任何 flexGrow 和 flexShrink 计算之前项目的大小。

• flexGrow 描述了容器沿主轴在其子元素之间分配空间的方式。完成子元素布局后，容器会根据其子元素指定的 flex 增长值分配所有剩余空间。

  flexGrow 接受任何大于等于 0 的浮点值，默认值为 0。容器会根据子元素的 flexGrow 值按权重在子元素之间分配所有剩余空间。

• flexShrink 描述了当子元素的总大小超出容器在主轴上的大小时，如何沿主轴收缩子元素。flexShrink 与 flexGrow 非常相似；如果将任何溢出的大小视为负的剩余空间，可以用相同的方式理解它。这两个属性结合使用效果也很好，可以让子元素根据需要增长和收缩。

  flexShrink 接受任何大于等于 0 的浮点值，默认值为 0（在 Web 上，默认值为 1）。容器会根据子元素的 flexShrink 值按权重收缩其子元素。

你可以在此处了解更多信息。

TypeScript

JavaScript

行间距、列间距和间距

• rowGap 设置元素各行之间间隙（沟槽）的大小。

• columnGap 设置元素各列之间间隙（沟槽）的大小。

• gap 设置行和列之间间隙（沟槽）的大小。这是 rowGap 和 columnGap 的简写形式。

你可以结合使用 flexWrap 和 alignContent 以及 gap，在项目之间添加一致的间距。

TypeScript

JavaScript

宽度和高度

width 属性指定元素内容区域的宽度。同样，height 属性指定元素内容区域的高度。

width 和 height 都可以接受以下值：

• auto（默认值）React Native 根据元素的内容计算元素的宽度／高度，这些内容可以是其他子元素、文本或图像。

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

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

TypeScript

JavaScript

位置

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

• relative（默认值）默认情况下，元素采用相对定位。这意味着元素会根据布局的正常流进行定位，然后根据 top、right、bottom 和 left 的值相对于该位置进行偏移。偏移不会影响任何同级元素或父元素的​​位置。

• absolute 采用绝对定位时，元素不会参与正常的布局流，而是独立于其同级元素进行布局。位置根据 top、right、bottom 和 left 的值确定。这些值会使元素相对于其包含块进行定位。

• static 采用静态定位时，元素会根据布局的正常流进行定位，并忽略 top、right、bottom 和 left 的值。除非存在其他优先级更高的样式属性（例如 transform），否则此 position 还会导致元素不为绝对定位的后代元素形成包含块。这样可以将 absolute 元素定位到其父元素以外的其他元素上。请注意，static 仅在新架构上可用。

TypeScript

JavaScript

包含块

元素的包含块是控制其位置和大小的祖先元素。 React Native 中包含块的工作方式与Web 上的工作方式非常相似，但由于缺少某些 Web 功能而进行了一些简化。

绝对定位元素的 top、right、bottom 和 left 值将相对于其包含块。

应用于绝对定位元素的百分比长度（例如：width: '50%' 或 padding: '10%'）将根据其包含块的大小进行计算。例如，如果包含块的宽度为 100 点，则绝对定位元素上的 width: 50% 会使其宽度为 50 点。

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

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

深入了解

查看交互式的 yoga playground，你可以使用它更好地理解 flexbox。

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

此外，你还可以查看 Wix Engineers 提供的一些示例。