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

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

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

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