FlexBox

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

借助 FlexBox，您可以：

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

何时使用 FlexBox

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

术语和概念

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

应用属性

您可以通过以下两种方式应用 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。