[CSS小技]flexboxでjustify-content:space-betweenの最後の行を両端揃えにしない方法

2022 7/25

2020年12月6日 2022年7月25日

[CSS小技]flexboxでjustify-content:space-betweenの最後の行を両端揃えにしない方法

数年前まではfloatでコーディングしていた部分が、今ではflexで簡単にコーディングできるようになりましたね。

ここ最近ではgridを使うことも多くなり、cssで表現できる幅が広がってきました。今の受けている案件は、IE10などの旧ブラウザへの対応がない限り、flexもしくはgridでコーディングしています。便利ですよねflex。

特に便利でよく使うプロパティがjustify-content:space-between。リストなどの要素を簡単に両端均等揃えにすることができて便利ですよね。ただこの両端揃え、普通にコーディングしてしまうと下のように最終行が両端均等揃えになってしまって不格好になっていまいます。

ご覧のとおり、7と8がjustify-content:space-betweenのせいで両端揃えになっていまいます。できることなら下のようにきれいに左揃えにしたいですよね。

こんな感じで左寄せにできればベストというのが今回の記事の目的。
ちょっとした工夫で上のように最終行だけ左揃えにすることができます。

コードはこちら

//html
<ul class="flex_box">
    <li class="flex_item">1</li>
    <li class="flex_item">2</li>
    <li class="flex_item">3</li>
    <li class="flex_item">4</li>
    <li class="flex_item">5</li>
    <li class="flex_item">6</li>
    <li class="flex_item">7</li>
    <li class="flex_item">8</li>
</ul>

// css
.flex_box{
    display:flex;
    justify-content:space-between;
}

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

.flex-item{
    width:30%;
}

理屈としては下のような感じに、flex-itemの最後の要素の後ろにafterで作ったブロックが最後に空要素として作られます。