justify-content:space-betweenで最後の列までキレイに要素を並べる方法。けど無理だった話

justify-content:space-betweenで最後の列までキレイに要素を並べる方法。けど無理だった話

CSS3 の flexbox のプロパティ justify-content:space-between を使って、margin を使わずに要素をキレイに横ならべしたかったんです。

でも、全ての列で要素の数が同じじゃないと、キレイに横並びしないんです。

justify-content:space-betweenを使って要素の横ならべをしてみる

横に4つの要素並べて、7つの要素しかないとこんな感じになっちゃう。

See the Pen
justify-content:space-betweenで横ならべ
by superNEET (@keeeego)
on CodePen.

8つの要素があればちゃんとキレイに並ぶんで、要素の数が固定の場合であれば超便利なんだけど、要素の数が可変の場合は使えたもんじゃない。

どうにかならないかとWEBの海をサーフィンしていると、JavaScriptを使えば解決できるよとの記事を発見しました。

Flexbox で全体を中央に配置しつつ最後の行を左揃えにする

ただ内容が、『全ての列の要素の数が同じじゃないなら、空の要素を追加して要素の数を合わせちゃえばいいじゃない!』といったマリーアントワネット的な内容でした。

無駄な要素を増やす事はHTMLが汚くなるので、却下です。

なので、諦めました。

marginを使った要素の横ならべ

やり方はいくらでもあると思いますが、2つほど紹介したいと思います。

  • 要素の左右にmarginをとって、一番左と一番右についた無駄な margin を上位要素のマイナスmarginで戻す
  • 右だけか左だけに margin をとって、:nth-child(Xn)を使ってmargin:0;を端だけに付ける

2種類ともこのHTMLで組んでいます。

<div id="wrap">
 <p>分かりやすく、上位要素の背景に色を付けています。
<ul id="justify__box">
  <li class="child">記事1</li>
  <li class="child">記事2</li>
  <li class="child">記事3</li>
  <li class="child">記事4</li>
  <li class="child">記事5</li>
  <li class="child">記事6</li>
  <li class="child">記事7</li>
</ul>
</div>

マイナスmarginを付ける方法

See the Pen
マイナスmarginで横ならべ
by superNEET (@keeeego)
on CodePen.

#wrap{
  background:#eee;
  width:430px;
  padding:0;
  margin:0;
}
#justify__box{
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  margin:0 -5px;
  padding:0;
}
.child{
  display:block;
  width:100px;
  background:#eee;
  border:1px solid #ccc;
  box-sizing:border-box;
  margin:0 5px 10px;
}

:nth-child(Xn)でmargin:0;を付ける方法

:nth-child(Xn) の使い方は、Xの倍数の要素に対してcssをかけることができます。

今回は、横に4つの要素を並べているので、:nth-child(4n) で使っています。

See the Pen
:nth-child(Xn)でmargin:0;を付ける方法
by superNEET (@keeeego)
on CodePen.

#wrap{
  background:#eee;
  width:430px;
  padding:0;
  margin:0;
}
#justify__box{
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  margin:0;
  padding:0;
}
.child{
  display:block;
  width:100px;
  background:#eee;
  border:1px solid #ccc;
  box-sizing:border-box;
  margin:0 10px 10px 0;
}
#justify__box .child:nth-child(4n){
  margin-right:0;
}

結局どっちの方法を使った方が良いのか

2種類紹介しましたが、オススメはマイナスmarginを付ける方法です。

横に並ぶ要素の数が固定の場合だったらどっちでもいいんですが、リキッドデザインを組むとなるとウインドウのサイズによって横幅が変わるので、要素の数も変わっちゃうからです。

その時に、:nth-child(Xn) は使えないので、マイナスmarginで組むのに慣れていた方が良さそうな気がするからです。

以上!PS.もっと簡単な方法知ってるよ!という方がいらっしゃいましたら、是非教えてください。

スポンサーリンク

コメント欄

コメントを書く

RELATED POST

関連記事

NEW POST

新着記事はこちら