フレックスコンテナ内で複数行のとき、交差軸方向の配置方法を指定する

今回書くalign-contentプロパティは、フレックスコンテナ内にフレックスアイテムを複数行に配置して、交差軸の方向に余白が生じる時、フレックスアイテムと余白をどのように配置するかを指定します。

align-contentプロパティ
値	説明
flex-start	全ての行はフレックスコンテナの始端側に寄せて配置されます。交差軸方向の余白は最後の行とフレックスボックスの終端との間に配置される。
flex-end	全ての行はフレックスコンテナの終端側に寄せて配置されます。交差軸方向の余白は最初の行とフレックスボックスの始端との間に配置される。
center	全ての行はフレックスボックスの中央に寄せられます。交差軸方向の余白は均等に2分割されて、それぞれの最初のラインの前と最後のラインの後ろに配置される。
space-between	最初の行がフレックスボックスの始端側に、最後の行がフレックスボックスの終端側に寄せて配置される。残りの行は、交差軸方向の余白が行間の間で均等に分配されるようにして配置される。
space-around	全ての行は、交差軸方向の余白が各フレックス・アイテムの間で均等に分配されるように配置されますが、先頭と末尾の余白は他の余白の半分になる。
stretch	余白が各行へ均等に分配されて、すべての行が交差軸方向の余白を使うように拡張される。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>複数行のときの交差軸方向の配置方法を指定する</title>
	<style>
	.container{
		width:480px;
		height:240px;
		border:2px solid black;
		/*
			フレックスアイテムを複数行に渡り表示するなら
			flex-wrapプロパティでwrapを指定する
		*/
		flex-wrap:wrap;
		display:flex;
		margin:12px;
	}
	/*
		align-contentプロパティの設定
	*/
	.acFs{align-content:flex-start;}
	.acFe{align-content:flex-end;}
	.acC {align-content:center;}
	.acSb{align-content:space-between;}
	.acSa{align-content:space-around;}
	.acSt{align-content:stretch;}

	div div{
		height:60px;
		flex:auto;
	}
	.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;}
	.bgSkyblue{background-color:skyblue;}
	h1{font-size:18px;}
	</style>
</head>
<body>
	<h1>align-content:flex-start</h1>
	<div class="container acFs">
		<div class="width150 bgYellow">1</div>
		<div class="width150 bgRed">2</div>
		<div class="width150 bgSilver">3</div>
		<div class="width150 bgGold">4</div>
		<div class="width150 bgSkyblue">5</div>
	</div>
	<h1>align-content:flex-end</h1>
	<div class="container acFe">
		<div class="width150 bgYellow">1</div>
		<div class="width150 bgRed">2</div>
		<div class="width150 bgSilver">3</div>
		<div class="width150 bgGold">4</div>
		<div class="width150 bgSkyblue">5</div>
	</div>
	<h1>align-content:center</h1>
	<div class="container acC">
		<div class="width150 bgYellow">1</div>
		<div class="width150 bgRed">2</div>
		<div class="width150 bgSilver">3</div>
		<div class="width150 bgGold">4</div>
		<div class="width150 bgSkyblue">5</div>
	</div>

	<h1>align-content:space-between</h1>
	<div class="container acSb">
		<div class="width150 bgYellow">1</div>
		<div class="width150 bgRed">2</div>
		<div class="width150 bgSilver">3</div>
		<div class="width150 bgGold">4</div>
		<div class="width150 bgSkyblue">5</div>
	</div>

	<h1>align-content:space-around</h1>
	<div class="container acSa">
		<div class="width150 bgYellow">1</div>
		<div class="width150 bgRed">2</div>
		<div class="width150 bgSilver">3</div>
		<div class="width150 bgGold">4</div>
		<div class="width150 bgSkyblue">5</div>
	</div>

	<h1>align-content:stretch</h1>
	<div class="container acSt">
		<div class="width150 bgYellow">1</div>
		<div class="width150 bgRed">2</div>
		<div class="width150 bgSilver">3</div>
		<div class="width150 bgGold">4</div>
		<div class="width150 bgSkyblue">5</div>
	</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>複数行のときの交差軸方向の配置方法を指定する</title>

<style>

.container{

width:480px;

height:240px;

border:2px solid black;

フレックスアイテムを複数行に渡り表示するなら

flex-wrapプロパティでwrapを指定する

flex-wrap:wrap;

display:flex;

margin:12px;

}

align-contentプロパティの設定

.acFs{align-content:flex-start;}

.acFe{align-content:flex-end;}

.acC {align-content:center;}

.acSb{align-content:space-between;}

.acSa{align-content:space-around;}

.acSt{align-content:stretch;}

div div{

height:60px;

flex:auto;

}

.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;}

.bgSkyblue{background-color:skyblue;}

h1{font-size:18px;}

</style>

</head>

<body>

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

<h1>align-content:stretch</h1>

</div>

</body>

</html>