【CSS Modules】place-content省略形プロパティの使い方

place-contentプロパティは、CSS GridレイアウトやFlexboxレイアウトにおいて、コンテナ内のコンテンツ全体を配置する方法を簡潔に設定するためのプロパティです。

このプロパティは、align-contentとjustify-contentという二つの重要なプロパティの機能を一つの宣言にまとめたショートハンドです。align-contentは、コンテナのクロス軸（Flexboxでは縦方向、Gridではブロック方向）において、複数行や複数列にわたるコンテンツのグループ全体がどのように整列するかを制御します。例えば、コンテンツを上寄せ、中央寄せ、下寄せにする、または均等に間隔を空けるといった配置が可能です。

一方、justify-contentは、コンテナの主軸（Flexboxでは横方向、Gridではインライン方向）において、同様に複数行や複数列にわたるコンテンツのグループ全体がどのように整列するかを制御します。こちらは左寄せ、中央寄せ、右寄せ、または均等な間隔といった配置を設定できます。

place-contentを使用することで、「place-content: center space-around;」のように、たった一行でコンテンツの垂直方向と水平方向の配置を同時に指定できます。これにより、CSSコードをより簡潔にし、可読性を向上させながら、複雑なレイアウトを効率的に実装することが可能になります。Webデザインにおける要素の整列を柔軟かつ強力に制御するために不可欠なプロパティの一つです。

Copy
1.container {
2  place-content: center space-around;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません