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 を使用して、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 が行に配置されます。