CSS place-items 属性

定義と用法

place-items 属性はグリッドレイアウト用で、以下の属性のショートカットです：

• align-items
• justify-items

place-items 属性が 2 値を持っている場合：

place-items: start center;

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

place-items 属性が 1 値を持っている場合：

place-items: end;

• 则 align-items と justify-items 属性の値は 'end' になります

例

例 1

各<div>要素をグリッドセルのインライン方向とブロック方向の両方の開始位置に配置します：

#container {
  place-items: start;
}

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

例 2：書き込みモード

グリッドコンテナの writing-mode 属性値が'vertical-rl'に設定されている場合、ブロック方向の終了位置は下部から左側に、インライン方向の終了位置は右側から下部に移動します：

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

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

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

justify-items 属性はフレックスボックスレイアウトに適用されません。したがって、フレックスボックスレイアウトで place-items 属性justify-items の値（つまり二番目の値）は無視されます。

#wrapper {
  place-items: stretch end;
}

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

CSS 文法

place-items: normal legacy|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

教程：CSS 网格布局

教程：CSS 弹性盒布局

参考：CSS align-items 属性

参考：CSS justify-items 属性

参考：CSS writing-mode 属性