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

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 を使用して、1 行内の交差軸に沿ってアイテムを配置します。この動作は、個々のアイテムで 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 は行に配置されます。