疑似要素で解決！Flexboxで均等配置して、最後を左詰めにする方法【space-between】

Flexboxのjustify-contentに【space-between】を指定すると、とても簡単に要素を均等配置させることができます。

レイアウトを組む時に、超絶便利なspace-betweenですが、1つだけ問題があります。それは複数行の時に左寄せにならない！ということです。

例えば、横に3つ並ぶレイアウトで子要素を5個入れてみます。
すると、3つ目まではきれいに配置されていますが、space-betweenの「指定した要素が最初と最後の端に寄る」という特徴により、4個目と5個目は左と右に寄ってしまいます。

記事一覧などでFlexboxを一番使いたいのに、記事数によってはレイアウトが崩れてしまうのはNG。かといって、そこだけinline-blockやfloatで組むのも微妙なところ…なんとかしたい。

ということで！今回は「Flexboxで均等配置して、最後を左詰めにする方法」をご紹介します！

目次非表示

目標物
HTML
CSS
3カラムの場合
- CSS
4カラムの場合
- CSS
5カラム以上の場合

目次へ

目標物

今回のゴールは、下の画像のように、Flexboxのspace-betweenを使って複数行の時でも、要素が左寄せになっていることです。

今回の重要ポイントは「疑似要素」です！

3カラムの場合、4カラムの場合、5カラム以上の場合と子要素の数によって対応方法が変わってくるので、それぞれ説明していきます！

HTML

基本となるHTMLです。カラム数に応じて、中のアイテム数を調節してください。

<div class="flexBox">
    <div class="flexItem">item1</div>
    <div class="flexItem">item2</div>
    <div class="flexItem">item3</div>
    <div class="flexItem">item4</div>
    <div class="flexItem">item5</div>
</div>

CSS

基本となるCSSです。
※SCSSで表記しています。

.flexBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border;

    .flexItem {
        width: 30%;
        padding: 50px 0;
        margin-bottom: 20px;
        text-align: center;
        background: gray;
        color:white;
    }
}

3カラムの場合

3カラムの場合はflexを指定している親要素に疑似要素afterをつけて、見えないボックスを作ってあげます。

MEMO

ポイントは疑似要素の幅を子要素の幅と同じ数値にすることです。
違う数値にすると・・・・・ずれます！

CSS

.flexBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border;

//----疑似要素を追記----
    &::after {
        content: "";
        width: 30%;
    }
//-------------------

    .flexItem {
        width: 30%;
        padding: 50px 0;
        margin-bottom: 20px;
        text-align: center;
        background: gray;
        color:white;
    }
}

疑似要素を入れてあげると、2行目の中の要素が両端に行くことはなく、左詰めになりました。

See the Pen Flexboxで左寄せ（3カラム） by design-levelup (@marurain) on CodePen.

4カラムの場合

先ほどの3カラムの場合は疑似要素のafterで対処しましたが、4カラムの場合はbefore要素も使っていきます。

CSS

基本のCSSは一緒ですが、要素を4つ横に並べるのでwidthを22%としました。

更に今回は、要素がspace-betweenにより両端にいかないようにするために、見えないボックスを疑似要素beforeも使用して、計2つ用意してあげる必要があります。

MEMO

before要素はafterと同じように入れただけだと親要素の前に入ってしまうのでorderで表示順を指定してあげましょう！
※orderを指定した要素は、orderを指定していないアイテムの後ろに表示さます。（指定しないものは見えないだけでデフォルト値:0が設定されている）

.flexBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border;

    //----疑似要素を追記----
    &::before {
        content: "";
        width: 22%;
        order: 1;
    }

    &::after {
        content: "";
        width: 22%;
    }

    //-------------------

    .flexItem {
        width: 22%;
        padding: 50px 0;
        margin-bottom: 20px;
        text-align: center;
        background: gray;
        color: white;
    }
}

要素が6つで2行になった場合でも、beforeとafterで作成した見えないボックスが並んでいるので、要素が両端に行かなくなりました。

See the Pen QWyRPap by design-levelup (@marurain) on CodePen.