FlexBox

注意： FlexBox 是一项实验性 API，日后可能会发生变化。如需使用此功能，请使用 @ExperimentalFlexBoxApi 为代码添加注释。请在问题跟踪器中提交任何问题或反馈。

FlexBox 是一个以单一方向布局项的容器。它可以调整大小、换行、对齐和在项之间分配空间，以最佳方式填充可用空间。这种布局非常适合不同尺寸的项，也适合在可用空间发生变化时调整项的大小。

借助 FlexBox，您可以：

• 控制内容如何放大和缩小以填充可用空间
• 在没有足够空间放置商品时，将商品换行或换列
• 使用便捷的预设在项之间分配额外空间

何时使用 FlexBox

FlexBox 通常用于在整个屏幕布局中显示少量项。对于整体屏幕布局，Grid 通常是更好的选择。FlexBox 不支持商品的延迟加载。如需显示大量项，请使用延迟列表和网格。如果您需要封装商品，请使用 FlexBox 而不是 FlowRow 和 FlowColumn。

术语和概念

要点： FlexBox 很大程度上受到 CSS 灵活盒布局规范的影响，并且在概念、术语和行为方面几乎完全相同。如果您熟悉 display: flex，就会发现 FlexBox 的属性和行为几乎完全相同。

FlexBox 以水平或垂直行来布局其项。这些线的方向确定了主轴。与主轴成 90 度角的轴是交叉轴。FlexBox 沿主轴的长度称为主尺寸。相应的横轴长度称为交叉尺寸。这些尺寸和轴共同构成了 FlexBox 的行为基础。

图 1. 当 FlexBox 方向为 Row 时的轴和尺寸。

图 2. 当 FlexBox 方向为 Column 时的轴和尺寸。

应用属性

您可以通过以下两种方式应用 FlexBox 属性：

• 使用 FlexBox(config) 将文件复制到 FlexBox 容器
• 使用 Modifier.flex 将焦点移至 FlexBox 内的某个项

容器属性 (config)	内容属性 (Modifier.flex)
direction - 商品布局方向 wrap - 如果主大小不足，是否封装商品 justifyContent - 如何沿主轴分布项 alignItems - 如何沿交叉轴对齐内容 alignContent - 当有多行时，如何分配来自交叉尺寸的额外空间 rowGap / columnGap - 在项目和行之间添加空间 如需详细了解这些属性，请参阅设置容器行为。	basis - 在分配主尺寸的任何额外空间之前，商品的大小 grow - 此项应从主要尺寸中获得的额外空间份额 shrink - 此商品应获得的主要尺寸的空间不足份额 alignSelf - 如何将交叉尺寸的额外空间分配给此项，会替换 alignItems order - 控制布局顺序 如需详细了解这些属性，请参阅设置商品行为。

了解 FlexBox 布局算法

FlexBox 最强大的功能之一是能够调整其子项的大小，以最适合其可用的空间。了解 FlexBox 如何实现此目的有助于您设置 FlexBox 属性，从而针对所有可能的尺寸优化界面。

FlexBox 的布局算法的工作方式如下：

1. 计算子元素的基本大小：使用子元素的 basis 值来计算其沿主轴的初始大小，然后再分配任何额外的空间。

2. 对子项进行排序：按子项的 order 值（如果存在）对子项进行排序。

3. 构建行：对于每个子项，检查其初始大小加上 gap 是否适合当前行的剩余空间。如果符合条件，请将此子级放置在相应行中。如果不是，请在启用换行的情况下将其放在新行上，否则将其放在当前行上，这样会导致溢出（部分内容会被容器边缘遮挡）。

4. 沿主轴对齐或调整商品大小：对于每一行，通过调整大小或对齐商品，将多余空间分配给商品或在商品之间分配。

5. 沿交叉轴对齐或调整项目大小：对于每行，通过拉伸或对齐项目，将额外的空间分配给项目或项目之间以及行之间。

现在，您已经熟悉 FlexBox 概念，请参阅使用入门，创建基本的 FlexBox。