设置容器行为

如需配置 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`，则会在上方添加新行。