<content-position>
The <content-position> は列挙型の値型で、justify-content および align-content プロパティ、それに place-content 一括指定で使用され、ボックスのコンテンツをそれ自身の中に配置するために使用されます。
構文
<content-position> = center | start | end | flex-start | flex-end
値
<content-distribution> 列挙型の値型は以下のキーワードのいずれかを使用して指定します。
centerstart-
配置対象物を配置コンテナーの先頭の端に寄せて配置します。
end-
配置対象物を配置コンテナーの末尾の端に寄せて配置します。
flex-start-
フレックスレイアウトでは、配置対象物を、フレックスコンテナーの主軸の先頭側 (main-start) または交差軸の先頭側 (cross-start) の適切な方に対応する配置コンテナーの端に寄せて配置します。フレックスレイアウト以外のレイアウトモードでは、
startと同一です。 flex-end-
フレックスレイアウトでは、配置対象物を、フレックスコンテナーの主軸の末尾側 (main-end) または交差軸の末尾側 (cross-end) の適切な方に対応する配置コンテナーの端に寄せて配置します。フレックスレイアウト以外のレイアウトモードでは、
endと同一です。
メモ:
left および right キーワードは、<content-position> から除外されています。これらは justify-* プロパティ (justify-content, justify-self, justify-items) の有効な位置の配置値であるものの、align-* プロパティ (align-content, align-self, align-items) では使用が許可されていないためです。代わりに、これらは justify-* プロパティの文法に明示的に含まれています。
仕様書
| Specification |
|---|
| CSS Box Alignment Module Level 3 # typedef-content-position |
関連情報
- このデータ型を使用するプロパティ:
align-content,justify-content,place-content - その他のボックス配置データ型:
<baseline-position>,<content-distribution>,content-position,<overflow-position>,<self-position> - CSS ボックス配置モジュール
- CSS フレックスボックスレイアウトモジュール
- CSS グリッドレイアウトモジュール