CSS place-self 属性

定義と使用法

place-self 属性は単一のグリッドアイテムをアライメントするために使用され、以下の属性の短縮形です：

• align-self
• justify-self

place-self属性に値が2つある場合：

place-self: start center;

• align-self属性の値は 'start' です
• justify-self属性の値は 'center' です

place-self属性に値が1つある場合：

place-self: end;

• その場合、align-selfおよびjustify-self属性の値はどちらも 'end' です

例

例 1

単一のグリッドアイテムをブロック方向と行内方向の両方で終了位置にアライメントする：

#myDiv {
  place-self: end;
}

実際に試してみてください

例 2：書き込みモード

当 <div> 要素の writing-mode 属性值設定が 'vertical-rl' になると、グリッドセルのブロック方向の終了位置は下部から左側に、行内方向の終了位置は右側から下部に移動します：

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

実際に試してみてください

例 3：フレックスレイアウト

place-self 属性はフレックスレイアウトのプロジェクトにも使用できますが justify-self の二番目の値は無視されます。なぜなら、フレックスレイアウトでは適用されないからです：

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

実際に試してみてください

CSS 言語

place-self: auto|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

教程：CSS 网格布局

教程：CSS 弹性盒布局

参考：CSS align-self 属性

参考：CSS justify-self 属性

参考：CSS writing-mode 属性