place-self

CSS の place-self プロパティは、 align-self および justify-self プロパティの両方を設定する一括指定プロパティです。最初の値は align-self プロパティの値で、二番目の値は justify-self プロパティの値です。二番目の値が存在しない場合、最初の値がそちらにも使用されます。

構文

/* キーワード値 */
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 が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。

形式文法

<'align-self'> <'justify-self'>?

仕様書

仕様書	状態	備考
CSS Box Alignment Module Level 3 place-self の定義	草案	初回定義

初期値	一括指定の各プロパティとして `align-self`: `auto` `justify-self`: `auto`
適用対象	block-level boxes, absolutely-positioned boxes, and grid items
継承	なし
メディア	視覚
計算値	一括指定の各プロパティとして `align-self`: `auto` computes to itself on absolutely-positioned elements, and to the computed value of `align-items` on the parent (minus any legacy keywords) on all other boxes, or `start` if the box has no parent. Its behavior depends on the layout model, as described for `justify-self`. Otherwise the specified value. `justify-self`: 指定値
アニメーションの種類	個別
正規順序	形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

フレックスレイアウトでの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
Supported in Flex Layout	Chrome 完全対応 59	Edge 未対応なし	Firefox 完全対応 45	IE 未対応なし	Opera 完全対応 46	Safari 未対応なし	WebView Android 完全対応 59	Chrome Android 完全対応 59	Firefox Android 完全対応 45	Opera Android 完全対応 43	Safari iOS 未対応なし	Samsung Internet Android 完全対応 7.0

凡例

完全対応: 完全対応
未対応: 未対応

グリッドレイアウトでの対応