flexboxで均等に並べたときに最後の行を左寄せにする方法【CSS】

複数カラムをレイアウトするときにFlexboxは便利で、justify-contentプロパティで均等に配置するのも簡単ですが、複数行になると、子要素の数が中途半端だと最後の行の要素がおかしくなってしまいます。

「justify-content:space-between;」の場合

例えば、justify-contentプロパティでspace-between;を指定した場合、両端に寄ってしまうので、真ん中が空いてしまいます。

「justify-content:space-around;」の場合

space-around;を指定した場合でも、両端と真ん中に余白ができてしまいます。

これを最後の行も左寄せにするには、before疑似要素やafter疑似要素を使って空のボックスを作ります。

カラム数によって多少方法が違うので、3カラムの場合と4カラムの場合に分けて説明したいと思います。

3カラムの場合

3カラムの場合は、flexを指定している要素のafter疑似要素で空のボックスを作ります。

See the Pen
justify-content3 by KUBO (@KUBOGEN)
on CodePen.

コード全体の詳細は省略しますが、合計5つの要素を3カラムで均等に並べており、2行目の要素が左寄せになるようにしています。

.container:after {
　content: “”;
　display: block;
　width: calc((100% – 2rem) / 3);
　margin-right: 1rem;
}

ここでポイントとなるのはafter疑似要素を使っていること。ここではcontainerクラスのdivに指定しています。

widthなどは他のflexアイテムと同じようにしてあげればいいと思います。

4カラムの場合

4カラムの場合は、flexを指定している要素のbefore要素・after疑似要素で空のボックスを作ります。

See the Pen
justify-content5 by KUBO (@KUBOGEN)
on CodePen.

.container:before {
　content: “”;
　display: block;
　width: calc((100% – 3rem) / 4);
　order: 1;
}
.container:after {
　content: “”;
　display: block;
　width: calc((100% – 3rem) / 4);
　margin-right: 1rem;
}

before疑似要素にはorderで表示順を制御してあげる必要があります。

5カラム以上の場合

5カラム以上になるとCSSでの対応は難しく、HTMLで空のボックスをあらかじめ入れておくか、Javascriptを使う必要があります。

3カラムの場合

4カラムの場合

5カラム以上の場合

Leave a Comment X