设置容器行为

如需配置 FlexBox 容器的行为，请创建 FlexBoxConfig 块并使用 config 参数提供该块。

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

使用 FlexBoxConfig 可定义布局方向、换行行为、对齐方式和项之间的间距。

布局方向

direction 函数用于设置主轴，该主轴决定了项的布局方向。它接受以下值：

Row（默认）：将主轴设置为水平方向。在从左到右的语言区域中，此方向为从左到右，而在从右到左的语言区域中，此方向则相反。
RowReverse：反转 Row 的方向。
Column：将主轴设置为垂直方向，从上到下。
ColumnReverse：反转 Column 的方向。

对齐项并分配额外空间

以下部分介绍了如何沿主轴和交叉轴对齐项并分配额外空间。

沿主轴

使用 justifyContent 沿主轴分配项。下表显示了当方向为 Row 时的行为。


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

沿交叉轴

使用 alignItems 沿单行中的交叉轴对齐项。此行为可由各个项使用 alignSelf修饰符进行替换。

以下图片显示了当方向为 Row 时的行为：


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

使用 alignContent 将行与交叉轴对齐，并在行之间分配额外空间。此属性仅在有多行（已启用换行）时适用。以下图片显示了当方向为 Row 时的行为：


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

换行项

换行功能可让 FlexBox 容器变为多行，并将不适合的项沿交叉轴移动到新行或新列。使用 wrap 配置换行行为。

`FlexWrap` 值	使用方向 `Row` 的示例
`NoWrap`（默认）：阻止项换行。如果主尺寸不足，项会溢出。
`Wrap`：当项（加上任何间距）的空间不足时，系统会在交叉轴方向上创建新行。例如，如果方向为 `Row`，则会在下方添加新行。
`WrapReverse`：与 `Wrap` 相同，只不过新行是在与交叉轴相反的方向上添加的。例如，如果方向为 `Row`，则会在上方添加新行。