FlexBox

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

FlexBox を使用すると、次のことができます。

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

FlexBox を使用する場合

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

用語とコンセプト

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

水平方向のメイン軸と垂直方向の交差軸を持つ FlexBox。
図 1. FlexBox の方向が Row の場合の軸とサイズ。
縦方向のメイン軸と横方向の交差軸を持つ FlexBox。
図 2. FlexBox の方向が Column の場合の軸とサイズ。

プロパティを適用する

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 を作成します。