CSS | display: flexで画像をレスポンシブに並べる方法

2022-06-242022-06-29CSS フレックスボックス,CSS

CSSのFlexBox（フレックスボックス）で画像を横並びにしてレスポンシブに伸縮させる方法を紹介しています。

画像をレスポンシブに並べる

See the Pen CSS list tag design (display flex & flex wrap) by yochans (@yochans) on CodePen.

以下はFlexBoxで画像を横並びにさせるHTMLとCSSのサンプルコードになります。

HTMLはサンプル用に同じ画像を6毎連続して配置しています。

<div id="container">
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
</div>

コンテナ部分に「display: flex;」を指定、「flex-wrap: wrap;」で折り返しありに、「gap: 4px;」で画像毎の内側の余白サイズを指定しています。

画像には「width」でサイズをパーセント指定して、最大3枚の画像が並ぶように、画面幅は600px以下の場合は2枚並びになるように「@media (max-width: 600px)」で再指定しています。

それぞれ画像のサイズは「calc()」で余白分を差し引いています。

#container {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 2px;
}

#container img {
	width: calc(33.3% - 4px);
}

@media (max-width: 600px) {
	#container img {
		width: calc(50% - 2px);
	}
}