Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

设置容器行为

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