CSS | display: flexで子要素の背景色をそれぞれ個別に指定する方法

2022-06-302022-07-04CSS フレックスボックス,CSS

CSSのFlexBox（フレックスボックス）で並べる子要素の背景色をそれぞれ個別に指定する方法とサンプルコードを紹介しています。

display: flexで子要素の背景色をそれぞれ個別に指定する

display: flexで子要素の背景色をそれぞれ個別に指定する動作サンプルとCSSのサンプルコードになります。

See the Pen CSS | FlexBox does not align height by yochans (@yochans) on CodePen.

HTMLにはコンテナ要素とするclass名「container」と横に並べる子要素を<div>タグで設置しています。

<div class="container">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

並べる子要素の背景色をそれぞれ指定するのに擬似クラス「:nth-child()」を使って個別に指定しています。

.container {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}

.container div {
	width: 60px;
	height: 60px;
	background: #1e90ff;
}


.container div:nth-child(1) {
		background: #1e90ff;
}

.container div:nth-child(2) {
		background: #3cb371;
}

.container div:nth-child(3) {
		background: #ffa500;
}

.container div:nth-child(4) {
		background: #ff69b4;
}

子要素の数が多く一定間隔で背景色をループさせる場合は擬似クラス「:nth-child()」で倍数指定します。

.container {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}

.container div {
	width: 60px;
	height: 60px;
	background: #1e90ff;
}


.container div:nth-child(4n + 1) {
		background: #1e90ff;
}

.container div:nth-child(4n + 2) {
		background: #3cb371;
}

.container div:nth-child(4n + 3) {
		background: #ffa500;
}

.container div:nth-child(4n + 4) {
		background: #ff69b4;
}