Flexbox（CSS フレキシブル ボックス レイアウト）は、コンテナ（Flex コンテナと呼ばれます）内の要素を柔軟に配置するための方法です。コンテナ内の要素（Flex アイテムと呼ばれます）は、指定した順序と間隔を維持しながらコンテナ スペースを最適化するために、拡大または縮小できます。Flexbox は、さまざまなサイズのアイテムを行や列に配置し、サイズの大きなアイテムが小さいアイテムよりも大きなスペースを占有する場合に特に有効に活用できます。
Flexbox の設定
Flexbox の設定は、[レスポンシブ] パネルの [Flexbox] タブで確認できます。
Flexbox を使用する
Flexbox を使用するには、[Flexbox を使用する] チェックボックスをオンにします。現在の親要素が Flex コンテナになり、Flexbox プロパティが [レスポンシブ] パネルで利用できるようになります。
次の場合は Flexbox を利用できません。
- 現在の親要素が
<p>や<h1>などのテキスト要素の場合。 - 現在の親要素に
<span>や<a>などのインライン要素が含まれている場合（親要素がページの場合は除く）。
Flex コンテナの直接の子要素は Flex アイテムになります（ガイドレイヤは除外されます）。Flex アイテムはメイン軸に沿って配置されます。メイン軸は水平方向または垂直方向に設定できます。軸に沿ってコンテンツ フローの方向を構成することもできます。Flexbox の向きと方向は変更できるため、プロパティは上、下、左、右ではなく「flex-start」や「flex-end」などの値に設定されます。
方向
方向によってメインの軸と軸に沿ったフロー方向が設定され、Flex アイテムの配置方法が決定されます。
| 方向 | 動作 | メイン軸 |
|---|---|---|
| row | Flex アイテムは、テキストフローの方向（英語などの左から右に記述する言語の場合は左から始まります）に並べて配置されます。 |
水平方向 |
| row-reverse | Flex アイテムは、テキストフローとは逆方向で行に配置されます（英語などの左から右に記述する言語の場合は右から始まります）。 |
水平方向 |
| column | Flex アイテムは、コンテンツ フローの方向（通常は上から順に）で列に配置されます。 |
垂直方向 |
| column-reverse | Flex アイテムは、コンテンツ フローと逆方向（通常は下から順に）で列に配置されます。 |
垂直方向 |
間隔
この間隔では、Flex アイテムの配置を自動で行うか、固定距離を使用するかを指定します。
| 間隔 | 動作 |
|---|---|
| 標準 | Flex アイテムは、指定した両端揃え、ラッピング、配置の設定に従って Flex コンテナ内に自動的に配置されます。 |
| 固定 | Flex アイテムは、指定された子の間隔と境界の間隔に従って配置されます。 |
両端揃え
両端揃えでは、Flex アイテムがメイン軸に沿ってどのように配置されるかを決定します。この設定は、標準間隔を使用する場合に利用できます。
| 両端揃え | 動作 |
|---|---|
| flex-start | Flex アイテムは行または列の始端にパッキングされます。 |
| flex-end | Flex アイテムは行または列の終端にパッキングされます。 |
| center | Flex アイテムはメイン軸に沿って中央に配置されます。 |
| space-between | Flex アイテムはメインコンテナに沿って等間隔に配置され、コンテナの端には開始アイテムと終了アイテムが配置されます。 |
| space-around | Flex アイテムはメイン軸に沿って等間隔に配置され、両端に半分のスペースが設けられます。 |
| space-evenly | Flex アイテムは、メイン軸に沿って等間隔に配置され、開始アイテムと終了アイテムの両側に同じ量のスペースが設けられます。 |
交差軸揃え
交差軸揃えとは、現在の行または列の交差軸に沿って Flex アイテムを配置する方法のことです。
| 交差軸揃え | 動作 |
|---|---|
| flex-start | Flex アイテムは交差軸の始端に配置されます。 |
| flex-end | Flex アイテムは交差軸の終端に配置されます。 |
| center | Flex アイテムは交差軸に沿って中央に配置されます。 |
| stretch | Flex アイテムは、交差軸に沿って使用可能なスペースを埋めるために拡張されます。 |
| baseline | Flex アイテムはベースラインが揃うように交差軸に沿って配置されます。 |
ラッピング
ラッピングでは、コンテンツがコンテナ内でラップするかどうかを決定します。この設定は、標準間隔を使用する場合に利用できます。
| ラッピング | 動作 |
|---|---|
| nowrap | Flex アイテムは 1 行または 1 列に配置されます。 |
| wrap | Flex アイテムが大きすぎて 1 行には収まらない場合、Flex アイテムはラップして複数の行または列を形成できます。 |
| wrap-reverse | Flex アイテムが大きすぎて 1 行には収まらない場合、Flex アイテムはラップして複数の行または列を形成できます。交差軸の方向が逆になります。 |
ラッピング揃え
ラッピング揃えでは、Flex コンテナに複数の行または列がある場合に、行または列が（メイン軸に対して垂直な）交差軸に沿ってどのように配置されるかを設定します。この設定は、標準間隔の使用とラッピングが有効な場合に利用できます。
| ラッピング揃え | 動作 |
|---|---|
| flex-start | 行や列はコンテナの始端にパッキングされます。 |
| flex-end | 行や列はコンテナの終端にパッキングされます。 |
| center | 行や列は交差軸の中央に配置されます。 |
| stretch | 高さが定義されていない限り、行または列は交差軸に沿って使用可能なスペースを埋めるように引き伸ばされます。 |
| space-between | 行や列は交差軸に沿って等間隔に配置され、コンテナの端に開始行と終了行または開始列と終了列が配置されます。 |
| space-around | 行や列は交差軸に沿って等間隔に配置され、両端に半分のスペースが設定されます。 |
子の間隔
Flex コンテナ内の 2 つのアイテム間で保持される距離（ピクセル単位）。この設定は、固定間隔を使用する場合に利用できます。
境界間隔
外側のアイテムと Flex コンテナ間で保持される距離（ピクセル単位）。この設定は、固定間隔を使用する場合に利用できます。
子の順番
Flexbox に含まれる要素は、ここに表示されます。要素を並べ替えるには、要素をリスト内の新しい位置にドラッグします。
ステージで Flex アイテムを移動して並べ替えることもできます。
Flexbox の子プロパティ
Flex アイテムには固有のプロパティがあります。Flexbox の設定を表示および編集する子を選択します。
Flex アイテムはサイズが増減する場合がありますが、幅と高さの最小値と最大値が考慮されます。Flex アイテムは Flexbox の設定に従って配置されるため、左と上のプロパティは無効ですが、変換プロパティを使用して位置をオフセットすることができます。
交差軸揃え
Flex アイテムの交差軸配置は、コンテナに設定されているデフォルトの交差軸配置よりも優先されます。
| 交差軸揃え | 動作 |
|---|---|
| auto | Flex アイテムに対して、Flex コンテナの交差軸揃えの設定を使用します。 |
| baseline | Flex アイテムのベースラインは、ベースラインになっている他の Flex アイテムのベースラインと位置揃えされます。 |
| center | Flex アイテムは交差軸の中央に配置されます。 |
| flex-end | Flex アイテムはコンテナの終端の交差軸に沿って配置されます。 |
| flex-start | Flex アイテムはコンテナの始端の交差軸に沿って配置されます。 |
| stretch | Flex アイテムは、高さが定義されていない限り、交差軸に沿ってコンテナ全体を埋めるように引き伸ばされます。 |
Flex grow
Flex grow 係数は、同じ行または列にある他のアイテムの Flex grow 係数に比例して、Flex コンテナ内のメイン軸に沿ったスペースを埋めるために Flex アイテムがどれだけ拡大するかを決定します。この設定は、標準間隔を使用する場合に利用できます。
たとえば、行に Flex grow 係数が 1、1、2 の Flex アイテムが 3 つ含まれている場合、最後の Flex アイテムは、行内の他のスペースの 2 倍のスペースを占めます。
行または列のアイテムに対する Flex grow 係数の合計が 1 未満である場合、Flex アイテムは使用可能なスペースの一部を使用できない可能性があります。
Flex grow 係数が 0 の場合、Flex アイテムのサイズは拡大されません。
Flex shrink
Flex shrink 係数は、同じ行または列の他のアイテムの Flex shrink 係数に比例して、メイン軸に沿って Flex コンテナ内に収まるために Flex アイテムがどれだけ縮小するかを決定します。この設定は、標準間隔を使用する場合に利用できます。
たとえば、行に Flex shrink 係数が 1、1、2 の Flex アイテムが 3 つ含まれている場合、最後の Flex アイテムは他の Flex アイテムよりも小さいサイズに縮小されます。Flex shrink 係数では、Flex アイテムのサイズが考慮されます。
Flex shrink 係数が 0 の場合、Flex アイテムは縮小されません。