CSS の place-self
プロパティは、 align-self
および justify-self
プロパティの両方を設定する一括指定プロパティです。最初の値は align-self
プロパティの値で、二番目の値は justify-self
プロパティの値です。二番目の値が存在しない場合、最初の値がそちらにも使用されます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */
place-self: auto center;
place-self: normal start;
/* 位置による配置 */
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: left auto;
place-self: right normal;
/* ベースラインによる配置 */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;
/* グローバル値 */
place-self: inherit;
place-self: initial;
place-self: unset;
値
auto
- 親の
align-items
の値で計算します。 normal
- このキーワードの効果は、現在のレイアウトモードに依存します。
- 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには
start
のように動作し、その他の絶対位置ボックスにはstretch
のように動作します。 - 絶対位置指定レイアウトの固定位置指定時は、このキーワードは
stretch
と同様に動作します。 - フレックスアイテムでは、このキーワードは
stretch
と同様に動作します。 - グリッドアイテムでは、このキーワードは
stretch
のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスはstart
のように動作します。 - ブロックレベルボックスと表のセルでは、プロパティは適用されません。
- 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには
self-start
- アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。
self-end
- アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。
flex-start
- このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。
flex-end
- このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。
center
- このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。
baseline
first baseline
last baseline
- first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline
の代替配置はstart
、last baseline
の代替配置はend
です。 stretch
- アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が
auto
であった場合、アイテムの寸法はmax-height
/max-width
(または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、auto
が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。
形式文法
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Box Alignment Module Level 3 place-self の定義 |
草案 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | block-level boxes, absolutely-positioned boxes, and grid items |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 離散値 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
BCD tables only load in the browser
グリッドレイアウトでの対応
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスコンテナー内でのアイテムの配置
- CSS グリッドガイド: CSS グリッドレイアウト内でのボックス配置
- CSS ボックス配置
align-self
プロパティjustify-self
プロパティ