投稿日: 2022年6月1日
更新日: 2022年7月26日

display:flex

justify-content

flex-start（初期値）… 行の開始位置から配置。左揃え。
flex-end … 行末から配置。右揃え。
center … 中央揃え
space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around … 両端の子要素も含め、均等に間隔をあけて配置

CSS
.container {
	display: flex;
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-between;
	justify-content: space-around;
}

flex-wrap

nowrap（初期値）… 子要素を折り返しせず、一行に並べる
wrap … 子要素を折り返し、複数行に上から下へ並べる
wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる

CSS
.container {
	display: flex;
	flex-wrap: nowrap;
	flex-wrap: wrap;
	flex-wrap: wrap-reverse;
}

flex-direction

row（初期値）… 子要素を左から右に配置
row-reverse … 子要素を右から左に配置
column … 子要素を上から下に配置
column-reverse … 子要素を下から上に配置

CSS
.container {
	display: flex;
	flex-direction: row;
	flex-direction: row-reverse;
	flex-direction: column;
	flex-direction: column-reverse;
}

align-items

stretch（初期値）… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start … 親要素の開始位置から配置。上揃え。
flex-end … 親要素の終点から配置。下揃え。
center … 中央揃え
baseline … ベースラインで揃える

CSS
.container {
	display: flex;
	align-items: stretch;
	align-items: flex-start;
	align-items: flex-end;
	align-items: center;
	align-items: baseline;
}

align-content

stretch（初期値）… 親要素の高さに合わせて広げて配置
flex-start … 親要素の開始位置から配置。上揃え。
flex-end … 親要素の終点から配置。下揃え。
center … 中央揃え
space-between … 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
space-around … 上下端にある子要素も含め、均等に間隔をあけて配置
（あまり使わない）