CSS

The justify-content property controls how elements are positioned horizontally, offering various alignment options such as left-align, center-align, right-align, and more.

justify-content

• justify-contentプロパティとは
• 値の種類
• 初期値について
• 初期値・適用対象・値の継承
• Sample
• Browser support

　justify-contentプロパティは、要素の水平方向（横方向）の配置を制御するための非常に重要なプロパティです。このプロパティは、要素のコンテナ内での配置を調整し、余白やスペースの使い方を制御します。主にフレキシブルボックス（Flexbox）コンテナやグリッド（Grid）コンテナで使用されます。

　align-contentプロパティの水平方向（横方向）版と考えると理解しやすいでしょう。

　尚、コンテナ内のアイテムの主軸方向や交差軸方向が横になるか縦になるかは、flex-directionプロパティの値によって変化します。

　必要に応じて justify-contentの値を変更することで、フレックスコンテナ内のフレックスアイテムの配置を制御できます。このプロパティは、CSSを使用して柔軟でレスポンシブなレイアウトを作成するのに役立ちます。

値の種類

　justify-contentプロパティには、以下の値があります。

flex-start

要素をコンテナの左端に配置します。つまり、要素は左寄せされます。【初期値】

例えば、ボタンのメニューなどで使用できます。

flex-end

要素をコンテナの右端に配置します。つまり、要素は右寄せされます。

例えば、ページ内のウィジェットを右側に寄せたい場合に使用できます。

center

要素をコンテナの中央に配置します。

ヘッダーやフッターなど、コンテンツを中央に配置するのに適しています。

space-between

要素を均等に配置し、コンテナの端には余白がありません。

space-around

要素を均等に配置し、コンテナの両側に余白があります。

　W3Cのページに掲載されている以下の図がわかりやすいようです。

初期値について

　justify-contentプロパティの初期値は、CSSフレックスコンテナのタイプによって異なります。

1. flex-directionプロパティの値が rowの場合、justify-contentプロパティの初期値は flex-startです。これにより、フレックスアイテムはメイン軸の開始位置から配置されます。
   ①

   ②

   ③
2. flex-directionプロパティの値が row-reverseの場合、justify-contentプロパティの初期値は flex-endです。これにより、フレックスアイテムはメイン軸の終了位置に配置されます。
   ①

   ②

   ③
3. flex-directionプロパティの値が columnの場合、justify-contentプロパティの初期値も flex-startです。これにより、アイテムはメイン軸のトップに配置されます。
   ①

   ②

   ③
4. flex-directionプロパティの値が column-reverseの場合、justify-contentプロパティの初期値は flex-endです。これにより、アイテムはメイン軸のボトムに配置されます。
   ①

   ②

   ③

初期値・適用対象・値の継承

初期値

flex-start

適用対象

フレックスコンテナ

値の継承

しない

Sample

<p>justify-content:flex-start; を指定</p>
<div class="sample" style="justify-content:flex-start;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

<p>justify-content:flex-end; を指定</p>
<div class="sample" style="justify-content:flex-end;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

<p>justify-content:center; を指定</p>
<div class="sample" style="justify-content:center;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

<p>justify-content:space-between; を指定</p>
<div class="sample" style="justify-content:space-between;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

<p>justify-content:space-around; を指定</p>
<div class="sample" style="justify-content:space-around;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

.sample {
	display: flex;
	flex-wrap: wrap; /* 狭い画面対策 */
	background-color: palegreen;
	margin: 10px;
}

.sample div {
	background-color: green;
	color: ghostwhite;
	margin: 4px;
	padding: 4px;
}

Browser support