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