FlexBox は、アイテムを単一の方向にレイアウトするコンテナです。アイテムのサイズ変更、折り返し、配置、スペースの分配を行い、使用可能なスペースを最適に埋めることができます。さまざまなサイズのアイテムや、利用可能なスペースが変化したときにアイテムのサイズを変更する場合に便利なレイアウトです。
FlexBox を使用すると、次のことができます。
- アイテムの拡大縮小を制御して、使用可能なスペースを埋める
- アイテムを新しい行または列に折り返す（十分なスペースがない場合）
- 便利なプリセットを使用して、アイテム間の余白を均等に配置する
FlexBox を使用する場合
通常、FlexBox は画面レイアウト全体の中で少数のアイテムを表示するために使用されます。画面レイアウト全体では、通常 Grid の方が適しています。FlexBox はアイテムの遅延読み込みをサポートしていません。多数のアイテムを表示するには、遅延リストとグリッドを使用します。アイテムをラップする必要がある場合は、FlowRow と FlowColumn の代わりに FlexBox を使用します。
用語とコンセプト
FlexBox は、アイテムを水平または垂直の行に配置します。これらの線の方向によって、メイン軸が確立されます。メイン軸に対して 90 度の軸は交差軸です。メイン軸に沿った FlexBox の長さは、メインサイズと呼ばれます。対応するクロス軸の長さは、クロスサイズと呼ばれます。これらのサイズと軸が FlexBox の動作の基礎となります。
FlexBox の方向が Row の場合の軸とサイズ。
FlexBox の方向が Column の場合の軸とサイズ。プロパティを適用する
FlexBox プロパティは次の 2 つの方法で適用できます。
FlexBox(config)を使用するFlexBoxコンテナModifier.flexを使用してFlexBox内のアイテムに
コンテナ プロパティ（ |
アイテムのプロパティ（ |
|---|---|
これらのプロパティの詳細については、コンテナの動作を設定するをご覧ください。 |
これらのプロパティの詳細については、アイテムの動作を設定するをご覧ください。 |
FlexBox レイアウト アルゴリズムについて
FlexBox の最も強力な機能の 1 つは、利用可能なスペースに最適に収まるように子をリサイズできることです。FlexBox の動作を理解すると、FlexBox プロパティを設定して、あらゆるサイズに対応するように UI を最適化できます。
FlexBox のレイアウト アルゴリズムは次のように機能します。
子要素のベースサイズを計算する: 子要素の
basis値を使用して、追加のスペースが分配される前に、メイン軸に沿った初期サイズを計算します。子を並べ替える: 子に
order値がある場合は、その値で子を並べ替えます。ビルドライン: 各子について、初期サイズと
gapを足したサイズが現在の行の残りのスペースに収まるかどうかを確認します。そうであれば、この子をその行に配置します。そうでない場合は、折り返しが有効になっている場合は新しい行に配置し、そうでない場合は現在の行に配置してオーバーフローさせます（コンテナの端で部分的に隠れます）。メイン軸のアイテムを配置またはサイズ変更する: 各行で、余分なスペースをアイテムのサイズを変更するか、配置することで、アイテムの間またはアイテム間に分配します。
交差軸のアイテムを配置またはサイズ変更する: 各行で、アイテムと行をストレッチまたは配置して、余分なスペースをアイテムと行の間またはアイテムと行に分配します。
FlexBox のコンセプトを理解したら、スタートガイドで基本的な FlexBox を作成します。