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 是否能放入当前行的剩余空间中。如果为 true，则将相应子级放置在行中。如果不能，则在启用换行的情况下将其放在新行上，否则将其放在当前行上，但会溢出（部分会被容器边缘遮挡）。

4. 沿主轴对齐或调整项目大小：对于每一行，通过调整项目大小或 对齐项目来将额外 空间分配给项目或在项目之间分配。

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

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