FlexBox

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

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

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

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

2. 子を並べ替える: 子に order 値がある場合は、その値で子を並べ替えます。

3. 行をビルドする: 各子について、初期サイズと gapの合計が現在の行の残りのスペースに収まるかどうかを確認します。収まる場合は、この子を行に配置します。収まらない場合は、 折り返しが有効になっている場合は新しい行に配置します。有効になっていない場合は、現在の行に配置して オーバーフローさせます（コンテナの端で一部が隠れます ）。

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

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

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