CSS Web制作

【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を編集する必要はありません。

まとめ:Flexboxで最後の行を左寄せするなら、gapが便利!

今回は、Flexboxのgapで要素間のみ余白を作り、最後の行を左寄せにする方法について解説してきました。

以前はgapは対応するブラウザが少なかったので使っていませんでしたが、現在はサポート終了になっているIE以外の主要ブラウザでは使えるので、どんどん使っていきましょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作
-