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。