「display:flex;のjustify-content:space-between;で最後の行が左寄せにならない」
こんな人に向けた記事です｡
この記事では以下のことがわかります｡
- 「justify-content:space-between;」の最後の行を左寄せにする方法
- 「justify-content:space-between;」が使えない場合の対処法
- 目次
結論：「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)を使う
4列の場合､疑似要素(:after,:before)を使う
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」にも最後の行を指定できるプロパティができることを願います｡
