Flexboxのjustify-contentを指定したとき最後の行を左寄せにするCSS

2019.04.1

コーディング時の要素の横並び。僕がWEBデザインやコーディングを覚え始めたときはfloatをつかうのが定石でした。

それが近年、CSS3が出てきてからはflexboxをつかうようになりました。floatをつかった方法よりも汎用性が高く、簡単ですし、clearfixも必要ない。

そんなflexboxですが、アイテムの数と列の数の組み合わせ次第では、どうしても最後の行のアイテムの数が中途半端になってしまうことがあります。そのままでは、最後の行だけ左に寄ったり、または左右両側に離れてしまったり、中央寄せになってしまたりとかなり見栄えが悪いです。

今回はそんなflexboxの最後の行の並べ方のCSSについてです。

3カラムで並べる場合

表示させるアイテムが3カラムの場合、親要素のafter擬似要素を利用して空のアイテムを生成しておくと、最後の行のアイテムの数がいくつでもきれいに左寄せにすることができます。

.container::after{
  content:"";
  display: block;
  width:30%;
}

See the Pen
LavNaX by keitasakurai (@mdesignyokohama)
on CodePen.

表示させるアイテムを4カラムで並べる場合は、after擬似要素に加えてbefore擬似要素を利用します。その際、orderプロパティで表示順を指定します。

.container::before{
  content:"";
  display: block;
  width:23%;
  order:1;
}
.container::after{
  content:"";
  display: block;
  width:23%;
}

See the Pen
jJRqQV by keitasakurai (@mdesignyokohama)
on CodePen.

5カラム以上で並べる場合は、CSSだけで対応することが難しいので、空の要素をHTML中に入れるしかなさそうです。

See the Pen
zbXqQj by keitasakurai (@mdesignyokohama)
on CodePen.