justify-content プロパティ

プロパティ justify-content は、フレックスボックス内の要素の主軸方向、およびグリッド内の要素の水平軸方向の配置方法を指定します。親要素に適用されます。

構文

セレクタ {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

値

値	説明
`flex-start`	要素は主軸（水平軸）の始点側に寄せられます。
`flex-end`	要素は主軸（水平軸）の終点側に寄せられます。
`center`	要素は主軸（水平軸）の中央に配置されます。
`space-between`	要素は主軸（水平軸）方向に均等に配置され、最初の要素は軸の始点、最後の要素は軸の終点に接するよう配置されます。
`space-around`	要素は主軸（水平軸）方向に均等に配置されます。最初の要素の前と最後の要素の後の間隔は、要素間の間隔と同じ大きさです。しかし、一見同じに見えますが実際は異なります：間隔は合算されるため、2つの要素間の距離は、要素と軸の始点/終点間の距離の2倍になります。

デフォルト値： flex-start。

例 . flex-start の値

現在、軸の方向は左から右（flex-direction: row による）であり、要素は左側に寄せられています：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . flex-end の値

この例でも軸の方向は左から右ですが、justify-content が flex-end に設定されているため、要素は右側に寄せられます：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . center の値

現在、主軸の方向に関わらず要素は中央に配置されます：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . space-between の値

要素は主軸方向に均等に配置され、最初の要素は軸の始点、最後の要素は軸の終点に接します：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . space-around の値

要素は主軸方向に均等に配置されます。最初の要素の前と最後の要素の後の間隔は、要素間の間隔と同じ大きさです。しかし、間隔は合算されるため、2つの要素間の距離は、要素と軸の始点/終点間の距離の2倍になります：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . center の値。軸が下向き

flex-direction を column に設定して、主軸の方向を変更しましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . space-between の値。軸が下向き

現在、要素は垂直方向に均等に配置されます：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . グリッド内での水平軸（行）の始点への配置

要素を水平軸の始点に合わせて配置してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

例 . グリッド内での水平軸の中央への配置

次に、要素を水平軸の中央に配置してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

例 . グリッド内での水平軸の終点への配置

要素を水平軸の終点に合わせて配置してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}