設定容器行為

如要設定 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`，系統會在上方新增一行。