03-6416-3903

平日10:00〜18:00

CONTACT

最新情報 & コラム

Flexboxのspace-betweenで最後の行を左寄せにする方法

ALLWEB

コーディングでレイアウトを組むときにFlexboxのspace-betweenを使用すると、簡単に要素を均一配置することができるので、とても便利です。

そんな便利なFlexboxのspace-betweenですが「指定した要素の最初と最後が両端にくる」という特徴のせいで、複数行にした場合は左寄せにならないという問題があります。

space-betweenを使うと要素が両端に配置される

しかし、beforeやafterなどの疑似要素を使うことで、この問題を解決することができます。

要素の数が3カラムなのか、4カラムなのかというところでも対応方法が変わりますので、それぞれ説明をしていきます。

HTML

まずはHTMLです。flexBoxというクラスにdisplay:flexをかけていきます。

中のflexItemはカラム数に応じて変更してほしいのですが、まずは3カラムから行うので、中の要素を5個用意しました。

<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>

SCSS

次にレイアウトを作るSCSSです。

.flexBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;

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

要素を横3つで並べる場合

先ほどのHTMLのように5つの要素を横3つに並べる場合は、2行目のアイテムが左右の両端に配置されてしまいます。

これを防ぐために、疑似要素のafterを使って見えないボックスを作ることで要素を左寄せにすることができます。

では先ほどのSCSSにafter要素を追記していきます。

SCSS

.flexBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;

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

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

こうすることで、2行目の要素が両端に行かずに、左寄せになります。

「他の要素と同じ大きさのボックスが並んでいる」というイメージがわかりやすいのではないでしょうか?

1つ注意点としては、疑似要素の幅(width)と子要素(flexItem)の幅を同じ数値にしないと、ずれてしまうので気をつけましょう。

要素を横4つで並べる場合

続いて要素を横に4つ並べる場合です。

横に3つ並べる場合は、要素が両端に配置されてしまった場合の間のスペースは見えないボックス1つ分でしたので疑似要素beforeのみで対処することができました。

しかし、今回は見えないボックス2つ分のスペースが必要になってきますので、after要素に加えてbefore要素も使用して対処していきます。

間には、ボックス2つ分のスペースが空いている

SCSS

基本的には先ほどと一緒で、beforeを追加していきます。

ここでの注意点はbefore要素にorderをつけ忘れないことです。

before要素はそのままですと要素の前に表示されてしまいます。(今回でいうと並んでいる一番最初のボックスの前に表示される。

そのため、order 要素の「指定していない要素の後ろにくる」という特性を活かし、order:1を指定しています。

.flexBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;

    &::before {
        content: "";
        width: 22%;
        order: 1;
    }

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

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

これで左寄せになりました!

まとめ

Flexboxは簡単に要素を横に並べることができるので、とっても便利です。

しかし、space-betweenで両端にいってしまう特性から、記事の数が変わる記事一覧などをコーディングする際には、泣く泣く違う方法で実装された方もいるのではないでしょうか?

疑似要素をうまく使えば対応することができるので、便利なFlexboxを使いこなして、コーディングの効率をどんどん上げていきましょう!!