フレックスコンテナ内の主軸方向の配置方法を指定する

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを指定するのがjustify-contentプロパティです、このプロパティはフレックスコンテナに対して適用します。初期値は「flex-start」です。

justify-contentプロパティ
値	説明
flex-start	フレックスアイテムはフレックスコンテナの始端側に寄せて配置されて、主軸方向の余白は全てフレックスアイテムの末尾に配置される。
flex-end	フレックスアイテムはフレックスコンテナの終端側に寄せて配置されて、主軸方向の余白は全てフレックスアイテムの先頭に配置される。
center	フレックスアイテムはフレックスボックスの中央に寄せられます。主軸方向の余白は均等に２分割されて、すべてのフレックスアイテムの先頭と末尾に配置される。
space-between	最初のフレックスアイテムの始端がフレックスボックスの始端に、最後のフレックスアイテムの終端がフレックスボックスの終端に揃えて配置される。残りのフレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるように配置される。フレックスアイテムが１つだけのときは「flex-start」と同じです。IE10,webkit系ブラウザでは「justify」と指定すると同様の配置です。
space-around	フレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるように配置されますが、先頭と末尾の余白は、他の余白の半分になり、フレックスアイテムが１つのときは、「center」で指定したときと同じ。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>フレックスコンテナ内の主軸方向の配置方法を指定する</title>
	<style>
	.container{
		width:400px;
		height:60px;
		border:2px solid black;
		display:flex;
		margin:12px;
	}
	/*
		justify-contendの設定
	*/
	.jcFs{justify-content:flex-start;}
	.jcFe{justify-content:flex-end;}
	.jcC {justify-content:center;}
	.jcSb{justify-content:space-between;}
	.jcSa{justify-content:space-around;}

	.width50{width:50px;}
	.width100{width:100px;}
	.width150{width:150px;}
	.width200{width:200px;}
	.bgRed{   background-color:red;}
	.bgYellow{background-color:yellow;}
	.bgGold{  background-color:gold;}
	.bgSilver{background-color:silver;}
	h1{font-size:16px;}
	</style>
</head>
<body>
	<h1>justify-content:flex-start</h1>
	<div class="container jcFs">
		<div class="width50 bgYellow">1</div>
		<div class="width50 bgRed">2</div>
		<div class="width50 bgSilver">3</div>
		<div class="width50 bgGold">4</div>
	</div>
	<h1>justify-content:flex-end</h1>
	<div class="container jcFe">
		<div class="width50 bgYellow">1</div>
		<div class="width50 bgRed">2</div>
		<div class="width50 bgSilver">3</div>
		<div class="width50 bgGold">4</div>
	</div>
	<h1>justify-content:center</h1>
	<div class="container jcC">
		<div class="width50 bgYellow">1</div>
		<div class="width50 bgRed">2</div>
		<div class="width50 bgSilver">3</div>
		<div class="width50 bgGold">4</div>
	</div>

	<h1>justify-content:space-between</h1>
	<div class="container jcSb">
		<div class="width50 bgYellow">1</div>
		<div class="width50 bgRed">2</div>
		<div class="width50 bgSilver">3</div>
		<div class="width50 bgGold">4</div>
	</div>

	<h1>justify-content:space-around</h1>
	<div class="container jcSa">
		<div class="width50 bgYellow">1</div>
		<div class="width50 bgRed">2</div>
		<div class="width50 bgSilver">3</div>
		<div class="width50 bgGold">4</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>フレックスコンテナ内の主軸方向の配置方法を指定する</title>

<style>

.container{

width:400px;

height:60px;

border:2px solid black;

display:flex;

margin:12px;

}

justify-contendの設定

.jcFs{justify-content:flex-start;}

.jcFe{justify-content:flex-end;}

.jcC {justify-content:center;}

.jcSb{justify-content:space-between;}

.jcSa{justify-content:space-around;}

.width50{width:50px;}

.width100{width:100px;}

.width150{width:150px;}

.width200{width:200px;}

.bgRed{ background-color:red;}

.bgYellow{background-color:yellow;}

.bgGold{ background-color:gold;}

.bgSilver{background-color:silver;}

h1{font-size:16px;}

</style>

</head>

<body>

<h1>justify-content:flex-start</h1>

</div>

<h1>justify-content:flex-end</h1>

</div>

<h1>justify-content:center</h1>

</div>

<h1>justify-content:space-between</h1>

</div>

<h1>justify-content:space-around</h1>

</div>

</body>

</html>