フレックスボックスでよく使う子要素の並べ方

最近はフレックスボックスで子要素を並べています。よく使っているパターンを書き留めます。

横に１列だけ並べる

子要素均等配置、両端余白なし

justify-content: space-betweenで、最初と最後の子要素を両端に配置し、中間の要素間の余白を均等にします。
子要素に表示している「要素」は、height とline-heighの値を同じにして垂直方向に中央配置しています。
子要素に width を設定しても無視されます。

HTML

<div class="flex-sample1">
	<div class="item">要素１</div>
	<div class="item">要素２</div>
	<div class="item">要素３</div>
</div>

CSS

.flex-sample1 {
	width: 100%;
	margin: 16px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.flex-sample1 .item {
	width: 28%;
	height: 60px;
	font-size: 20px;
	text-align: center;
	line-height: 60px;
	border: 1px solid #666;
}

子要素均等配置、両端余白あり

justify-content: space-around で、子要素の両側に均等な余白を空けて配置します。

HTML

<div class="flex-sample2">
	<div class="item">要素１</div>
	<div class="item">要素２</div>
	<div class="item">要素３</div>
</div>

CSS

.flex-sample2 {
	width: 100%;
	margin: 16px auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 16px;
}
.flex-sample2 .item {
	width: 28%;
	height: 60px;
	font-size: 20px;
	text-align: center;
	line-height: 60px;
	border: 1px solid #666;
}

子要素均等配置で両端余白なし、垂直方向に中央配置

justify-content: space-around;で、子要素の両側に均等な余白を空けて配置します。
align-items: center;で、垂直方向に中央配置します。

HTML

<div class="flex-sample3">
	<div class="item1">要素１</div>
	<div class="item2">要素２</div>
	<div class="item3">要素３</div>
</div>

CSS

.flex-sample3 {
	width: 100%;
	margin: 16px auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 16px;
}
.flex-sample3 .item1 {
	height: 90px;
	line-height: 90px;
}
.flex-sample3 .item2 {
	height: 60px;
	line-height: 60px;
}
.flex-sample3 .item3 {
	height: 80px;
	line-height: 80px;
}
.flex-sample3 .item1, .flex-sample3 .item2, .flex-sample3 .item3
{
	width: 25%;
	font-size: 20px;
	text-align: center;
	border: 1px solid #666;
}

複数行、横に並べる

flex-wrap: wrap;で、複数行配置することができます。
子要素の width は、無視されません。

HTML

<div class="flex-sample4">
	<div class="item">要素１</div>
	<div class="item">要素２</div>
	<div class="item">要素３</div>
	<div class="item">要素４</div>
	<div class="item">要素５</div>
	<div class="item">要素６</div>
</div>

CSS

.flex-sample4 {
	width: 100%;
	margin: 16px auto;
	display: flex;
	justify-content: start;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	gap: 16px;
}
.flex-sample4 .item {
	width: 23%;
	height: 60px;
	font-size: 20px;
	text-align: center;
	line-height: 60px;
	border: 1px solid #666;
}

縦に並べる

flex-direction: column; で、並びを縦にします。

HTML

<div class="flex-sample5">
	<div class="item">要素１</div>
	<div class="item">要素２</div>
	<div class="item">要素３</div>
</div>

CSS

.flex-sample5 {
	width: 100%;
	margin: 16px auto;
	display: flex;
	justify-content: start;
	flex-direction: column;
	align-content: center;
	gap: 16px;
}
.flex-sample5 .item {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	font-size: 20px;
	padding: 0 16px;
	text-align: left;
	line-height: 50px;
	border: 1px solid #666;
}

最後に

自動で子要素を配置してくれて、フレックスボックスは大変便利ですね。今後も使っていくので書き留めました。
フレックスボックスでは、色々な設定がありますが、私がよく使っているのはこれくらいです。