ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

space-betweenで最後の行を左寄せにする方法【CSS flex】

space-betweenで最後の行を左寄せにする方法【CSS flex】

「display:flex;のjustify-content:space-between;で最後の行が左寄せにならない」

こんな人に向けた記事です。

この記事では以下のことがわかります。

  • 「justify-content:space-between;」の最後の行を左寄せにする方法
  • 「justify-content:space-between;」が使えない場合の対処法
目次
  1. 結論:「justify-content:space-between;」で最後の行が左寄せになるのは4列まで
  2. flexの子要素の数が変わる場合
    1. 3列の場合、疑似要素(:after)を使う
    2. 4列の場合、疑似要素(:after,:before)を使う
  3. flexの子要素の数が変わらない場合
    1. 最後の行が列数と同じ
    2. 最後の行が1列
  4. 5列以上の対処方法
  5. まとめ

結論:「justify-content:space-between;」で最後の行が左寄せになるのは4列まで

「justify-content:space-between;」が最後の行が左寄せで使える場面は以下のとおり

  • flexの子要素の数が変わる場合は、4列まで
  • flexの子要素の数が変わらない場合は、最後の行が列数と同じとき
  • flexの子要素の数が変わらない場合は、最後の行が1列のとき

いろいろ調べたり、考えたりしてみましたが、CSSだけで解決することは現時点では完全にはできません。
JavaScriptやdisplay:grid;等を使うとできるかもしれませんが、そこまですると逆に使わないほうがいいと思うので、この記事では無視します。

「justify-content:space-between;」が使える場面を紹介します。
1列のときは使う必要がなく、2列のときは考えなくても使えるので省略します。

flexの子要素の数が変わる場合

実際の案件では、投稿一覧とかで横並びにするときが想定されます。
投稿一覧は無限に数が増えていくものなので、列数ががわかりません。
こういった場合は、4列までしか使えないです。

3列の場合、疑似要素(:after)を使う

flexの子要素がわからない場合、3列であれば対応することができます。
親要素の疑似要素(:after)を使い、同じ幅で目に見えない要素をひとつつくっておくことで2番目の要素が右寄せになってしまうことを防ぎます。
この方法だと要素が3列になった場合でも、高さがなく目に見えない疑似要素になるのでデザインも崩れることがありません。

See the Pen flex 3列 by hashi84 (@hashi84) on CodePen.

POINT
3列の場合、疑似要素(:after)を使うことで「justify-content:space-between;」を使うことができます。

4列の場合、疑似要素(:after,:before)を使う

3列のときと同様に疑似要素を使います。
4列のときは:afterだけでなく、:beforeを使いorder:1;を指定します。
これで要素の最後に高さのない同じ幅の要素を2つ並べることができます。
疑似要素は:after,:beforeの2つしか使えないので、5列以上では使えないということになります。

See the Pen flex 4列 by hashi84 (@hashi84) on CodePen.

POINT
4列の場合、疑似要素(:after、:before)を使うことで「justify-content:space-between;」を使うことができます。

flexの子要素の数が変わらない場合

WordPress等のCMSを使わないコーディングだったり、固定ページで子要素の数が変わらないデザインの場合、最後の行が決まっていれば使うことができます。
ただし、実際の案件では企画、デザインの段階で数が決まっていても、あとから増えたり、減ったりすることはあることなので、そういう可能性も想定して使わないほうが無難です。

最後の行が列数と同じ

以下の場合、4列にする指定で最後の行も4列なので、こういう場合は「justify-content:space-between;」を使うことができます。
このパターンなら、5列になろうが、6列になろうが使うことができます。

See the Pen flex 固定で最後の行が列数と同じ by hashi84 (@hashi84) on CodePen.

最後の行が1列

以下の場合は、最後の行が1つだけだと決まっている場合です。
この場合は、最後の行の左寄せで次に右寄せになるものがないので使うことができます。

See the Pen flex 固定で最後の行が1列 by hashi84 (@hashi84) on CodePen.

POINT
デザインが変わらない場合は、「最後の行が列数と同じ」「最後の行が1列」の場合に限り、何列でも「justify-content:space-between;」を使うことができます。

5列以上の対処方法

5列以上で最後の行を左寄せにするときは「justify-content:space-between;」は使えません。
「justify-content:space-between;」を使わなければ、自然と左寄せなので、子要素にmarginだけ指定すればいいということになります。
ということは、結果的に「justify-content:space-between;」を無理に使わないほうが簡単ではないか?というところに行きつきます。

See the Pen flex 5列以上 by hashi84 (@hashi84) on CodePen.

POINT
何列であろうと「justify-content:space-between;」はできるだけ使わず、「margin」で間隔を調整したほうが列数を気にする必要がなくて簡単。

まとめ

「justify-content:space-between;」の最後の行が左寄せにする方法、使えない場合の対処法を紹介しました。

同じようなプロパティでテキストを均等にする「text-align:justify;」は、「text-align-last」というものができたので、「justify-content」にも最後の行を指定できるプロパティができることを願います。