<content-distribution>

構文

<content-distribution> = space-between | space-around | space-evenly | stretch

値

次のキーワード値を <content-distribution> 構文用語が表します。

space-between

配置対象物を配置コンテナー内で均等に分散配置します。最初のアイテムは配置コンテナーの先頭の端にぴったりと配置され、最後のアイテムは配置コンテナーの末尾の端にぴったりと配置され、残りのアイテムは均等に分散されるため、隣接する任意の 2 つのアイテム同士の空間は同じになります。space-between のデフォルトの代替配置は、フレックスレイアウトでは safe flex-start、それ以外の場合は start です。アイテムが 1 つのみである場合、そのアイテムは先頭の端に揃えられます。

space-around

アイテムはコンテナー内で均等に配置され、両端に半分の大きさの空間が確保されます。隣接する 2 つのアイテム同士の間隔は均一で、最初のアイテムの前と最後のアイテムの後の間隔は、それ以外の間隔の半分の大きさになります。space-around のデフォルトの代替配置は safe center です。コンテナーに子要素が 1 つしかない場合、アイテムは中央に配置されます。

space-evenly

アイテムはコンテナー内で均等に配置され、両端には同じサイズの空間が確保されます。 隣接する 2 つのアイテム間、最初のアイテムの 前、最後のアイテムの後の間隔はすべて同じです。 space-evenly のデフォルトの代替配置は safe center です。 コンテナーに子要素が 1 つしかない場合、アイテムは中央に配置されます。

stretch

アイテムの合計サイズがコンテナーのサイズより小さい場合、伸長できるアイテムは max-height、max-width、または同等の機能によって課された制約を遵守しつつ、等間隔（比例ではなく）にサイズが拡大され、アイテムの合計サイズがコンテナーを正確に埋めるように調整されます。stretch のデフォルトの代替配置は、フレックスボックスでは flex-start、それ以外のレイアウトモードでは start です。アイテムが 1 つだけで、そのアイテムが伸長可能な場合、コンテナーを埋めるまで伸長されます。

仕様書

関連情報

• このデータ型を使用するプロパティ: align-content, justify-content, place-content
• その他のボックス配置データ型: <baseline-position>, <content-position>, <overflow-position>, and <self-position>
• CSS ボックス配置モジュール
• CSS フレックスボックスレイアウトモジュール
• CSS グリッドレイアウトモジュール