2026.05.19

space-betweenで要素が足りないときに左詰めにしたい

designchips

display:flex;で要素を横並び配置にしたいとき、「justify-content:space-between」を指定することがありますが、横列と要素の数が合わないときにスペースができてしまうことってありませんか？

justify-content: space-betweenでスペースができてしまうケース

上図の横3列配置で要素が5つの時に、横幅均等配置のため2段目の真ん中にスペースができてしまいますが、これを左に詰めたい！ってときの対処法をご紹介します。

DesignChips

実現したい配置は下図の並びです！

今回は疑似要素を利用して「見えない箱」を作り出す解決策をご紹介します。

基本となるコード

ベースとなるHTMLは以下の通りで、ulタグで囲ったliタグを横並びに配置しています。

<ul class="conts_box">
　<li><img src="images/img_01.jpg"></li>
　<li><img src="images/img_02.jpg"></li>
　<li><img src="images/img_03.jpg"></li>
　<li><img src="images/img_04.jpg"></li>
　<li><img src="images/img_05.jpg"></li>
</ul>

CSSはこちら（子要素の横幅を30％にして横３列の配置にしています）

.conts_box{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.conts_box li{
	width: 30%;
	background: #1a2c6d;
	margin-bottom: 3%;
	text-align: center;
}

子要素が５つの場合、２段目の真ん中にスペースができてしまう「デモサンプル１」をまずは確認してみましょう。

デモサンプル１

デモサンプル１の２段目の子要素を左に詰めるために、親要素のulタグに割り当てた「.conts_box」の疑似要素「::after」に見えない箱を作ります。

.conts_box{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.conts_box li{
	width: 30%;
	background: #1a2c6d;
	margin-bottom: 3%;
	text-align: center;
}
.conts_box::after {
	display: block;
	content:"";
	width: 30%;
}

親要素に疑似要素を指定することで、「デモサンプル２」のように左に要素が詰まるようになります。

デモサンプル２

ここで注意したいこと！