Google 會運用 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`，系統會在上方新增一行。