使用 Flexbox 进行布局
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
组件可以通过 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（默认值）文本和子元素从左到右排列。应用于元素起始位置的外边距(margin)和内边距(padding)将作用于左侧。 -
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 类似，但 alignItems 作用于交叉轴而非主轴。
-
stretch(默认值) 拉伸子元素使其匹配容器交叉轴方向的height。 -
flex-start将子元素对齐到容器交叉轴的起始位置。 -
flex-end将子元素对齐到容器交叉轴的末尾位置。 -
center将子元素沿交叉轴方向居中对齐。 -
baseline使子元素沿公共基线对齐。各子元素可单独设置为父元素的基准参考线。
要使 stretch 生效，子元素在次轴方向不能有固定尺寸。下例中，只有移除子元素的 width: 50 后，设置 alignItems: stretch 才会生效。
了解更多请访问这里。
- TypeScript
- JavaScript
自身对齐 (Align Self)
alignSelf 的选项和效果与 alignItems 相同，但它作用于单个子元素而非容器内所有子元素。alignSelf 可覆盖父容器通过 alignItems 设置的任何对齐方式。
- TypeScript
- JavaScript
多行对齐 (Align Content)
alignContent 定义多行元素在交叉轴上的分布方式，仅在通过 flexWrap 实现多行换行时生效。
-
flex-start(默认值) 将换行后的行组对齐到容器交叉轴起始位置。 -
flex-end将换行后的行组对齐到容器交叉轴末尾位置。 -
stretch(Yoga在Web端的默认值) 拉伸行组使其填满容器交叉轴方向的高度。 -
center将换行后的行组沿交叉轴方向居中对齐。 -
space-between沿交叉轴均匀分布行组，剩余空间分配在行组之间。 -
space-around沿交叉轴均匀分布行组，剩余空间环绕在行组周围。容器两端分配的空间大小为行组间距的一半。 -
space-evenly沿交叉轴均匀分布行组，任意两个相邻行组之间、首行组与容器起点之间、末行组与容器终点之间的间距完全相等。
了解更多请访问这里。
- TypeScript
- JavaScript
换行控制 (Flex Wrap)
flexWrap 属性设置在容器上，用于控制当子元素沿主轴溢出容器尺寸时的行为。默认情况下，子元素会被强制压缩为单行布局。若允许换行，则必要时会沿主轴方向将子元素拆分为多行排列。
当发生换行时，可通过 alignContent 指定各行在容器内的排列方式。了解更多请访问此处。
- TypeScript
- JavaScript
Flex 基础值、扩展与收缩
-
flexBasis是沿主轴方向定义元素默认尺寸的轴无关属性。设置子元素的flexBasis类似于：当父容器为flexDirection: row时设置该子元素的width；当父容器为flexDirection: column时设置其height。flexBasis表示元素在flexGrow和flexShrink计算发生前的初始尺寸。 -
flexGrow定义容器内剩余空间沿主轴在子元素间的分配比例。布局完成后，容器将根据子元素的 flexGrow 值按权重分配剩余空间。flexGrow接受任意 ≥0 的浮点数值（默认值为 0）。容器将按子元素的flexGrow值加权分配剩余空间。 -
flexShrink定义当子元素总尺寸沿主轴溢出容器时，各子元素的收缩比例。flexShrink与flexGrow非常相似，可将溢出尺寸视为负剩余空间。这两个属性协同工作，使子元素能根据需要扩展或收缩。flexShrink接受任意 ≥0 的浮点数值（默认值为 0，Web 环境中默认为 1）。容器将按子元素的flexShrink值加权收缩。
了解更多请访问此处。
- TypeScript
- JavaScript
行间距、列间距与复合间距
可结合 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的值。这种position属性还会导致元素不为绝对定位的后代形成包含块（除非存在其他优先样式属性如transform）。这允许absolute元素可以定位到非其父元素的对象。注意：static仅在新架构中可用。
- TypeScript
- JavaScript
包含块
元素的包含块是控制其位置和大小的祖先元素。React Native 中包含块的工作原理与网页上的工作方式非常相似，但由于缺少某些网页特性而有所简化。
绝对定位元素的 top、right、bottom 和 left 值将相对于其包含块确定。
应用于绝对定位元素的百分比长度（例如 width: '50%' 或 padding: '10%'）将根据其包含块的尺寸计算。例如，如果包含块宽度为 100 点，则绝对定位元素的 width: 50% 将使其宽度变为 50 点。
以下规则可帮助确定任意元素的包含块：
-
若元素的
position类型为relative或static，则其包含块为父元素。 -
若元素的
position类型为absolute，则其包含块为满足以下条件之一的最近祖先元素：- 采用非
static的position定位方式 - 设置了
transform属性
- 采用非
深入学习
通过交互式 yoga 演练场可更深入理解 Flexbox 布局。
我们已涵盖基础知识，但布局中可能还需用到其他样式。完整控制布局的属性列表详见此文档。
此外，可参考 Wix 工程师提供的布局示例。