CSS place-content 属性

定義と使用法

place-content 属性はエラストボックス（flexbox）とグリッド（grid）レイアウトに使用され、以下の属性のショートカットです：

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

place-content: start center;
  • align-content 属性の値が 'start' です。
  • justify-content 属性の値が 'center' です。

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

place-content: end;
  • align-content と justify-content 属性の値が 'end' に設定されています。

例

例 1

エラストイックコンテナの底にエラストイックな要素を配置し、水平方向で要素間の間隔を均等にする：

#container {
  display: flex;
  place-content: end space-between;
}

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

例 2：グリッドレイアウト

ブロック方向の追加スペースは各グリッドプロジェクトの周りに均等に配置され、グリッドプロジェクトは行内方向に中央にアライメントされます：

#container {
  display: grid;
  place-content: space-around center;
}

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

CSS 文法

place-content: normal|value|initial|inherit;

属性値

値 説明
normal

デフォルト値。レイアウトのコンテキストに依存します。

align-content と justify-content に属性値を設定しない場合に等しいです。
stretch

グリッド：サイズが設定されていない場合、グリッドプロジェクトは伸びてグリッドコンテナを満たします。

フレックスボックス：フレックスプロジェクトが交差軸上でサイズを指定していない場合、交差軸上で伸びてフレックスコンテナを満たします。
start プロジェクトをコンテナの開始位置にアライメントします。
end プロジェクトをコンテナの終了位置にアライメントします。
center プロジェクトをコンテナの中心位置にアライメントします。
space-between コンテナの二つの軸上で利用可能なスペースを均等に配置し、プロジェクト間のスペースを等しくします。
space-around コンテナの二つの軸上で利用可能なスペースを均等に配置し、各プロジェクトの周りのスペースを等しくします。
space-evenly コンテナの二つの軸上でプロジェクトを均等に配置します。
overflow-alignment

'safe'：内容がオーバーフローする場合、プロジェクトのアライメントを'start'に設定します。

'unsafe'：プロジェクトの内容がオーバーフローするかどうかに関わらず、アライメント値を変更しません。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性は、親要素からこの属性を継承します。参照してください： inherit。

技術的詳細

デフォルト値： normal
継承性： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.placeContent="end space-around"

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
59.0 79.0 53.0 11.0 46.0

関連ページ

チュートリアル：CSS グリッドレイアウト

チュートリアル：CSS 弹性盒レイアウト

参考：CSS align-content 属性

参考：CSSジャスティフィケーションコンテンツ属性

参考：HTML DOM alignContent 属性