プロパティ align-content

プロパティ align-content は、 flexブロックの交差軸方向、またはグリッドの垂直軸方向に沿った要素の整列を指定します。親要素に適用されます。

構文

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

値

値	説明
`flex-start`	ブロックが交差軸（垂直軸）の始端に寄せられます。
`flex-end`	ブロックが交差軸（垂直軸）の終端に寄せられます。
`center`	ブロックが交差軸（垂直軸）の中央に配置されます。
`space-between`	ブロックが交差軸（垂直軸）方向に均等に配置され、最初の要素は軸の始端、最後の要素は軸の終端に寄せられます。
`space-around`	ブロックが交差軸（垂直軸）方向に均等に配置され、最初のブロックと軸の始端の間、最後のブロックと軸の終端の間の間隔は、他のブロック間の間隔と同じになります。しかし、見た目ほど等間隔ではありません: 間隔は合算されるため、2つのブロック間の距離は、ブロックと軸の始端/終端との間の距離の2倍になります。

例 . 値 flex-start

この例では、整列の基準となる軸は上から下に向かっており、これは交差軸です。得られた結果からわかるように、すべての要素はその上部（始端）に寄せられています:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

例 . 値 flex-end

この例では、プロパティ align-content の値が flex-end に設定されているため、ブロックは交差軸の下端（終端）に寄せられています:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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;
}