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 の定義		 草案 初回定義
初期値一括指定の各プロパティとして
適用対象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
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Flex LayoutChrome 完全対応 59Edge 完全対応 79Firefox 完全対応 45IE 未対応 なしOpera 完全対応 46Safari 完全対応 11WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 45Opera Android 完全対応 43Safari iOS 完全対応 11Samsung Internet Android 完全対応 7.0

凡例

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

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Grid LayoutChrome 完全対応 59Edge 完全対応 79Firefox 完全対応 45IE 未対応 なしOpera 完全対応 46Safari 未対応 なしWebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 45Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0

凡例

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

関連情報