使用 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 方向

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

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

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

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

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

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

TypeScript

JavaScript

布局方向

布局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 非常相似，但它不是应用于主轴，而是应用于交叉轴。

• 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 Basis、Grow 和 Shrink

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

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

  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 根据元素的内容（无论是其他子元素、文本还是图像）计算元素的宽度/高度。

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

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

TypeScript

JavaScript

位置

元素的 position 类型定义了它是相对于自身、其父元素还是其包含块进行定位。

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

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

• static 当静态定位时，元素根据布局的正常流程进行定位，并将忽略 top、right、bottom 和 left 值。此 position 还会导致元素不会为绝对后代形成包含块，除非存在某些其他优先级样式属性（例如 transform）。这允许 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，则其包含块为以下任一条件成立的最近祖先
  • 它具有除 static 之外的 position 类型
  • 它具有 transform

深入了解

查看您可以用来更好地理解 flexbox 的交互式yoga 游乐场。

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

此外，您可以查看Wix 工程师的一些示例。