CSS | display:flexで横並びの個数を固定して折り返す方法

2021-05-082021-05-09CSS フレックスボックス,CSS

CSSのflexbox（display:flex）で横並びで個数を固定して折り返す方法を紹介しています。

See the Pen CSS flexbox Fix the number by yochans (@yochans) on CodePen.

display:flexで横並びの個数を固定して折り返す

flexbox（display:flex）で横並びの個数を固定して折り返すサンプルコードです。

上記サンプルのHTMLコードです。
こちらを利用して実装方法を紹介しています。

<div id="container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

flexboxは個数を折返しまでの直接指定する事はできませんので、要素の横幅をパーセントで指定していく事で個数の固定化を実装します。

例えば、4つの要素毎に折り返す場合、25%を指定します。

#container {
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
}

#container div {
	width: 25%;
}

要素にmargin、paddingをpxで指定している場合はcalc()で差分を計算することで簡単に調整できます。

margin・paddingは左右にかかっていますので、数値を2倍で計算します。

#container {
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
}

#container div {
	width: calc(25% - 22px); /* margin padding分を引く */
	margin: 1px;
	padding: 10px;
	color: #FFF;
	background: #000;
}

要素間のスペースをgapで指定している場合も同様にcalc()で差分して指定する事が可能です。

#container {
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap: 1px;
}

#container div {
	width: calc(25% - 22px); /* gap padding分を引く */
	padding: 10px;
	color: #FFF;
	background: #000;
}

モバイル表示で数を変更する

折返しまでの要素数で指定している場合、モバイルサイズだと表示が詰まり過ぎになる可能性があります。

その場合、画面幅の小さいデバイス向けにwidthやgapのサイズを変更します。

@media (max-width: 600px) {
	width: calc(50% - 22px);
}