Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

设置容器行为

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