【CSS】Flexboxのgapで要素間のみ余白を作り最後の行を左寄せにする方法

Flexboxで横並びにした要素が複数行あるんだけど、最後の行だけ左寄せにする方法ある？

例えばブログカードなどでよくありますが、以下のような場合はどうやってコーディングしますか？

条件としては、

3列
最後の行は左寄せ
要素間の余白は10px
要素間以外の余白は無し

今回は、この条件で最後の行を左寄せにする方法を解説します。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

Flexboxのgapで最後の行を左寄せにする方法

Flexboxで最後の行を左寄せにする方法はいくつかありますが、まずはよくある失敗例から見てみます。

HTMLは共通でこちらです。

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

『justify-content: space-between;』を使った場合

全体の幅が320pxで、要素の幅が100pxで3列だとしたら、横に関してはjustify-content: space-between;でいいと思うかも知れません。

CSSはこちら。

.container {
  background-color: #ccc;
  display: flex; /* 子要素を横並び */
  flex-wrap: wrap; /* 子要素を折り返す*/
  justify-content: space-between;
  margin: 20px;
  width: 320px;
}
.box {
  background-color: #1cb4d3;
  height: 100px;
  margin-bottom: 10px; /* boxの右の余白 */
  width: 100px;
}
/* 4番目のbox以降は下の余白0 */
.box:nth-child(n + 4) {
  margin-bottom: 0;
}

幅100pxのboxが3つと、box間の余白が10pxなので、全体の幅が320pxでピッタリになります。

しかし、これだと最後の行がこうなってしまいます。

See the Pen
Flexboxのgapで最後の行を左寄せにする方法⑤ by junpei (@junpei-sugiyama)
on CodePen.

最後の行が両端に広がってしまっています。

これは、justify-content: space-between;を使ったときのよくある失敗例になります。

justify-content: space-between;を使ったままで最後の行だけ左寄せにしたい場合は、

boxをもう一つ作って透過
擬似要素を使う

といった方法がありますが、1つ目に関してはレスポンシブ対応していないからNGです。

擬似要素を使う方法もありますが、

3列：擬似要素1つ使用
4列：擬似要素2つ使用
5列：不可

となります。

レスポンシブに対応していない例

CSSはこちら。

.container {
  background-color: #ccc;
  display: flex; /* 子要素を横並び */
  flex-wrap: wrap; /* 子要素を折り返す*/
  margin: 20px;
  width: 320px;
}
.box {
  background-color: #1cb4d3;
  height: 100px;
  margin-bottom: 10px; /* boxの右の余白 */
  margin-right: 10px; /* boxの下の余白 */
  width: 100px;
}
/* 3列目のboxは右の余白0 */
.box:nth-child(3n) {
  margin-right: 0;
}
/* 4番目のbox以降は下の余白0 */
.box:nth-child(n + 4) {
  margin-bottom: 0;
}

ポイントはこちら。

boxの右にmargin-right: 10px;
3列目だけmargin-right: 0;
4つ目の要素以降margin-bottom: 0;

.boxで要素の右と下に余白を作っていますが、3列目の右と4番目以降の下の余白があると崩れるので、最後の2つで余白を0にしています。

デモはこちらです。

See the Pen
Flexboxのgapで最後の行を左寄せにする方法① by junpei (@junpei-sugiyama)
on CodePen.

一見問題なさそうですが、これがレスポンシブで3列から2列になった場合は、このようになります。

See the Pen
Flexboxのgapで最後の行を左寄せにする方法② by junpei (@junpei-sugiyama)
on CodePen.

一目で崩れているのが分かります。

gapを使う方法

そして本題のgapを使う方法を見てみます。

CSSはこちら。

.container {
  background-color: #ccc;
  display: flex; /* 子要素を横並び */
  flex-wrap: wrap; /* 子要素を折り返す*/
  gap: 10px;
  margin: 20px;
  width: 320px;
}
.box {
  background-color: #1cb4d3;
  height: 100px;
  width: 100px;
}

先ほどのCSSより、だいぶスッキリしたと思います。

追記したのはgap: 10px;だけで、削除したのは以下になります。

/* 削除したCSS */
.box {
  margin-bottom: 10px; /* boxの右の余白 */
  margin-right: 10px; /* boxの下の余白 */
}
/* 3列目のboxは右の余白0 */
.box:nth-child(3n) {
  margin-right: 0;
}
/* 4番目のbox以降は下の余白0 */
.box:nth-child(n + 4) {
  margin-bottom: 0;
}

gapとは翻訳すると『隙間』となり、Flexboxの子要素の要素間の余白を設定します。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

そして、先ほど崩れてしまった2列はこちら。

See the Pen
Flexboxのgapで最後の行を左寄せにする方法④ by junpei (@junpei-sugiyama)
on CodePen.

今度はイメージ通りになりました。

これであれば5列でも平気ですし、2列でも3列でもCSSを編集する必要はありません。