使用 Flexbox 进行布局

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

¥A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

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

¥You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

提醒

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

¥Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, alignContent defaulting to flex-start instead of stretch, flexShrink defaulting to 0 instead of 1, the flex parameter only supporting a single number.

弹性

¥Flex

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

¥flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.

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

¥In the following example, the red, orange, and green views are all children in the container view that has flex: 1 set. The red view uses flex: 1 , the orange view uses flex: 2, and the green view uses flex: 3 . 1+2+3 = 6, which means that the red view will get 1/6 of the space, the orange 2/6 of the space, and the green 3/6 of the space.

弯曲方向

¥Flex Direction

flexDirection 控制节点子节点的布局方向。这也称为主轴。横轴是垂直于主轴的轴，或者是缠绕线布置的轴。

¥flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.

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

  ¥column (default value) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.

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

  ¥row Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.

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

  ¥column-reverse Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.

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

  ¥row-reverse Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.

你可以了解更多 此处。

¥You can learn more here.

TypeScript

JavaScript

布局方向

¥Layout Direction

布局 direction 指定层次结构中子项和文本的布局方向。布局方向也会影响边 start 和 end 所指的内容。默认情况下，React Native 采用 LTR 布局方向进行布局。在此模式下，start 指左，end 指右。

¥Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge start and end refer to. By default, React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right.

• LTR（默认值）文本和子项从左到右排列。应用于元素开头的边距和填充将应用于左侧。

  ¥LTR (default value) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.

• RTL 文本和子项从右到左排列。应用于元素开头的边距和填充将应用于右侧。

  ¥RTL Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.

TypeScript

JavaScript

证明内容合理

¥Justify Content

justifyContent 描述了如何在其容器的主轴内对齐子项。例如，你可以使用此属性将子项在容器内水平居中（将 flexDirection 设置为 row）或在容器内将子项垂直居中（将 flexDirection 设置为 column）。

¥justifyContent describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with flexDirection set to row or vertically within a container with flexDirection set to column.

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

  ¥flex-start(default value) Align children of a container to the start of the container's main axis.

• flex-end 将容器的子级与容器主轴的末端对齐。

  ¥flex-end Align children of a container to the end of the container's main axis.

• center 将容器的子项与容器主轴的中心对齐。

  ¥center Align children of a container in the center of the container's main axis.

• space-between 将子项均匀地分布在容器的主轴上，在子项之间分配剩余空间。

  ¥space-between Evenly space off children across the container's main axis, distributing the remaining space between the children.

• space-around 将子项均匀地分布在容器的主轴上，将剩余空间分布在子项周围。与 space-between 相比，使用 space-around 将导致空间分配到第一个子项的开头和最后一个子项的末尾。

  ¥space-around Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to space-between, using space-around will result in space being distributed to the beginning of the first child and end of the last child.

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

  ¥space-evenly Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

你可以了解更多 此处。

¥You can learn more here.

TypeScript

JavaScript

对齐项目

¥Align Items

alignItems 描述了如何沿着容器的横轴对齐子项。它与 justifyContent 非常相似，但 alignItems 不应用于主轴，而是应用于交叉轴。

¥alignItems describes how to align children along the cross axis of their container. It is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis.

• stretch（默认值）拉伸容器的子项以匹配容器横轴的 height。

  ¥stretch (default value) Stretch children of a container to match the height of the container's cross axis.

• flex-start 将容器的子项与容器横轴的起点对齐。

  ¥flex-start Align children of a container to the start of the container's cross axis.

• flex-end 将容器的子项与容器横轴的末端对齐。

  ¥flex-end Align children of a container to the end of the container's cross axis.

• center 将容器的子项与容器横轴的中心对齐。

  ¥center Align children of a container in the center of the container's cross axis.

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

  ¥baseline Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.

信息

为了使 stretch 发挥作用，子项沿辅助轴不得具有固定尺寸。在以下示例中，在从子级中删除 width: 50 之前，设置 alignItems: stretch 不会执行任何操作。

¥For stretch to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting alignItems: stretch does nothing until the width: 50 is removed from the children.

你可以了解更多 此处。

¥You can learn more here.

TypeScript

JavaScript

自我对齐

¥Align Self

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

¥alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.

TypeScript

JavaScript

对齐内容

¥Align Content

alignContent 定义线沿横轴的分布。仅当使用 flexWrap 将项目换行为多行时，这才有效。

¥alignContent defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using flexWrap.

• flex-start（默认值）将换行线与容器横轴的起点对齐。

  ¥flex-start (default value) Align wrapped lines to the start of the container's cross axis.

• flex-end 将换行线与容器横轴的末端对齐。

  ¥flex-end Align wrapped lines to the end of the container's cross axis.

• stretch（在网络上使用 Yoga 时的默认值）拉伸封装线以匹配容器横轴的高度。

  ¥stretch (default value when using Yoga on the web) Stretch wrapped lines to match the height of the container's cross axis.

• center 将缠绕线与容器横轴的中心对齐。

  ¥center Align wrapped lines in the center of the container's cross axis.

• space-between 在容器的横轴上均匀分布线条，分布线条之间的剩余空间。

  ¥space-between Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.

• space-around 在容器的横轴上均匀分布线条，将剩余空间分布在线条周围。容器的每一端都有与项目之间的空间相比一半大小的空间。

  ¥space-around Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.

• space-evenly 在容器的横轴上均匀分布线条，将剩余空间分布在线条周围。每个空间大小相同。

  ¥space-evenly Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.

你可以了解更多 此处。

¥You can learn more here.

TypeScript

JavaScript

弹性封装

¥Flex Wrap

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

¥The flexWrap property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.

换行时，alignContent 可用于指定如何将线放置在容器中。了解更多 此处。

¥When wrapping lines, alignContent can be used to specify how the lines are placed in the container. Learn more here.

TypeScript

JavaScript

弹性基础、增长和收缩

¥Flex Basis, Grow, and Shrink

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

  ¥flexBasis is an axis-independent way of providing the default size of an item along the main axis. Setting the flexBasis of a child is similar to setting the width of that child if its parent is a container with flexDirection: row or setting the height of a child if its parent is a container with flexDirection: column. The flexBasis of an item is the default size of that item, the size of the item before any flexGrow and flexShrink calculations are performed.

• flexGrow 描述容器内应沿主轴在其子级之间分配多少空间。布置其子级后，容器将根据其子级指定的 Flex Growth 值分配任何剩余空间。

  ¥flexGrow describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.

  flexGrow 接受任何 >= 0 的浮点值，其中 0 是默认值。容器将根据子级的 flexGrow 值在其子级之间分配任何剩余空间。

  ¥flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s flexGrow values.

• flexShrink 描述了在子项总大小超出主轴上容器大小的情况下，如何沿主轴收缩子项。flexShrink 与 flexGrow 非常相似，如果任何溢出的大小被认为是负剩余空间，则可以以相同的方式进行思考。这两个属性也可以很好地协同工作，让子级根据需要成长和缩小。

  ¥flexShrink describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.

  flexShrink 接受任何 >= 0 的浮点值，其中 0 是默认值（在 Web 上，默认值为 1）。容器将根据子项的 flexShrink 值加权缩小其子项。

  ¥flexShrink accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s flexShrink values.

你可以了解更多 此处。

¥You can learn more here.

TypeScript

JavaScript

行间隙、列间隙和间隙

¥Row Gap, Column Gap and Gap

• rowGap 设置元素行之间间隙（装订线）的大小。

  ¥rowGap sets the size of the gap (gutter) between an element's rows.

• columnGap 设置元素列之间的间隙（装订线）的大小。

  ¥columnGap sets the size of the gap (gutter) between an element's columns.

• gap 设置行和列之间的间隙（装订线）的大小。它是 rowGap 和 columnGap 的简写。

  ¥gap sets the size of the gap (gutter) between rows and columns. It is a shorthand for rowGap and columnGap.

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

¥You can use flexWrap and alignContent along with gap to add consistent spacing between items.

TypeScript

JavaScript

宽度和高度

¥Width and Height

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

¥The width property specifies the width of an element's content area. Similarly, the height property specifies the height of an element's content area.

width 和 height 都可以采用以下值：

¥Both width and height can take the following values:

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

  ¥auto (default value) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.

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

  ¥pixels Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.

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

  ¥percentage Defines the width or height in percentage of its parent's width or height, respectively.

TypeScript

JavaScript

位置

¥Position

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

¥The position type of an element defines how it is positioned relative to either itself, its parent, or its containing block.

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

  ¥relative (default value) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of top, right, bottom, and left. The offset does not affect the position of any sibling or parent elements.

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

  ¥absolute When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the top, right, bottom, and left values. These values will position the element relative to its containing block.

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

  ¥static When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the top, right, bottom, and left values. This position will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. transform). This allows absolute elements to be positioned to something that is not their parent. Note that static is only available on the New Architecture.

TypeScript

JavaScript

包含块

¥The Containing Block

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

¥The containing block of an element is an ancestor element which controls its position and size. The way containing blocks work in React Native is very similar to how they work on the web, with some simplifications due to the lack of some web features.

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

¥The top, right, bottom, and left values of an absolutely positioned element will be relative to its containing block.

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

¥Percentage lengths (e.g.: width: '50%' or padding: '10%') applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then width: 50% on an absolutely positioned element will cause it to be 50 points wide.

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

¥The following list will help you determine the containing block of any given element:

• 如果该元素的 position 类型为 relative 或 static，则其包含块是其父级。

  ¥If that element has a position type of relative or static, then its containing block is its parent.

• 如果该元素的 position 类型为 absolute，则其包含块是以下之一为真的最近祖级：

  ¥If that element has a position type of absolute, then its containing block is the nearest ancestor in which one of the following is true:

  • 它具有除 static 之外的 position 类型

    ¥It has a position type other than static

  • 它有一个 transform

    ¥It has a transform

更深入

¥Going Deeper

查看交互式 yoga 在线运行，你可以使用它来更好地了解 Flexbox。

¥Check out the interactive yoga playground that you can use to get a better understanding of flexbox.

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

¥We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented here.

此外，你还可以看到 Wix 工程师 中的一些示例。

¥Additionally, you can see some examples from Wix Engineers.