コンテナの動作を設定する

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` の場合、新しい行が上に追加されます。

次の例は、FlexBox ラッピングアルゴリズムの仕組みを示しています。FlexBox コンテナのメインサイズは 100dp で、wrap は FlexWrap.Wrap に設定され、ギャップは 8dp です。これには、それぞれ basis 20dp、40dp、50dp を含む 3 つのアイテムが含まれています。

この行には 100dp 個の空きスペースがあります。子 1 は 20dp です。スペースがあるため、子 1 が行に配置されます。