FlexBox

FlexBox は、アイテムを 1 方向にレイアウトするコンテナです。アイテムのサイズ変更、折り返し、配置、スペースの配分を行い、使用可能なスペースを最適に埋めることができます。これは、さまざまなサイズのアイテムや、利用可能なスペースが変化したときにアイテムのサイズを変更する場合に便利なレイアウトです。

FlexBox では、次のことが可能です。

• アイテムを拡大または縮小して、使用可能なスペースを埋める方法を制御する
• 十分なスペースがない場合に、アイテムを新しい行または列に折り返す
• 便利なプリセットを使用して、アイテム間の余分なスペースを分散する

FlexBox を使用する状況

FlexBox は通常、画面レイアウト全体の中で少数のアイテムを表示するために使用されます。画面全体のレイアウトには、通常 Grid の方が適しています。FlexBox は、アイテムの遅延読み込みをサポートしていません。多数のアイテムを表示するには、遅延リストとグリッドを使用します。アイテムをラップする必要がある場合は、FlowRow と FlowColumn の代わりに FlexBox を使用します。

用語とコンセプト

FlexBox は、アイテムを水平または垂直のラインに配置します。これらの線の方向によって、主軸が決まります。主軸に対して 90 度の軸が交差軸です。メイン軸に沿った FlexBox の長さは、メインサイズと呼ばれます。対応するクロス軸の長さは、クロスサイズと呼ばれます。これらのサイズと軸が FlexBox の動作の基礎となります。

プロパティを適用する

FlexBox プロパティは、次の 2 つの方法で適用できます。

• FlexBox(config) を使用して FlexBox コンテナに接続する
• Modifier.flex を使用して FlexBox 内のアイテムに適用する

コンテナのプロパティ（config）	アイテムのプロパティ（Modifier.flex）
direction - アイテムのレイアウト方向 wrap - メインサイズが不十分な場合にアイテムを折り返すかどうか justifyContent - メイン軸に沿ってアイテムを分散する方法 alignItems - 交差軸に沿ってアイテムを配置する方法 alignContent - 複数の行がある場合に、クロスサイズから余分なスペースを分散する方法 rowGap / columnGap - 項目と行の間にスペースを追加します これらのプロパティの詳細については、コンテナの動作を設定するをご覧ください。	basis - メインサイズの余分なスペースが分配される前のアイテムのサイズ grow - このアイテムが受け取るメインサイズからの余分なスペースの割合 shrink - このアイテムが受け取るべきメインサイズからのスペース不足の割合 alignSelf - クロスサイズからこのアイテムに余分なスペースを分配する方法。alignItems をオーバーライドします。 order - レイアウトの順序を制御します。 これらのプロパティの詳細については、アイテムの動作を設定するをご覧ください。

FlexBox レイアウト アルゴリズムについて

FlexBox の最も強力な機能の一つは、利用可能なスペースに最適になるように子のサイズを変更できることです。FlexBox がこれをどのように行うかを理解すると、FlexBox プロパティを設定して、考えられるすべてのサイズに合わせて UI を最適化できます。

FlexBox のレイアウト アルゴリズムは次のように機能します。

1. 子の基本サイズを計算する: 子の basis 値を使用して、余分なスペースが分配される前の主軸に沿った初期サイズを計算します。

2. 子を並べ替える: 子を order 値（存在する場合）で並べ替えます。

3. 行を構築する: 各子について、初期サイズに gap を加えたサイズが現在の行の残りのスペースに収まるかどうかを確認します。その場合は、この子を列に並べます。収まらない場合は、折り返しが有効であれば新しい行に配置し、有効でなければ現在の行に配置してオーバーフローさせます（コンテナの端で部分的に隠れます）。

4. メイン軸のアイテムを整列またはサイズ変更する: 各行で、アイテムをサイズ変更または整列して、アイテムにまたはアイテム間に余分なスペースを分配します。

5. 交差軸のアイテムを整列またはサイズ変更する: 各行について、アイテムと行を伸縮または整列して、アイテムと行の間に追加のスペースを配分します。

FlexBox のコンセプトを理解したら、スタートガイドで基本的な FlexBox を作成する。