【CSS】フレックスボックスで最後の行を左寄せにする方法

RELEASE / 2024.2.21 UPDATE / 2024.02.20

css

justify-content

space-between

フレックスボックス

CSSのフレックボックスは様々な配置を簡単に実装することが出来る便利なプロパティです。
フレックボックスの中でもjustify-contentプロパティはコンテンツの左右配置をコントロールすることが出来るプロパティで、space-betweenを指定すると均等配置させることが出来ます。
しかし、このjustify-content: space-between;を指定するとコンテンツの数によっては最後の行が違和感のある配置になってしまいます。
今回の記事ではjustify-content: space-between;を指定した際、最後の行を違和感なく配置する方法をご紹介したいと思います。

この記事の目次を表示

1 コンテンツ数による配置の違い
- 1.1 3カラムの場合
- 1.2 4カラムの場合
2 space-betweenを使う場合の対策
- 2.1 3カラムの場合
3 最後の行がちょうどの場合の疑似要素の挙動
4 5カラム以上の場合
5 まとめ

コンテンツ数による配置の違い

まずはjustify-content: space-between;を指定すると、どんな感じで配置され、最後の行にどんな違和感が出るのか見てみましょう。

3カラムの場合、CSSは以下を指定しています。

.wrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item{
    width: calc((100% - 40px) / 3);
    margin-bottom: 20px;
    padding: 15px;
    text-align: center;
    background: #dc5a45;
    box-sizing: border-box;
}

3カラムの場合

コンテンツが3カラムの場合、コンテンツの数に応じて以下のように配置されます。

最後の行のコンテンツが3つの場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後の行のコンテンツが1つの場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後の行のコンテンツが2の場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このように3カラムの場合、最後の行のコンテンツが2つの場合、左右に配置されてしまいました。

4カラムの場合

続いて、4カラムの場合、コンテンツの数に応じて以下のように配置されます。

4カラムの場合、CSSは以下を指定しています。

.wrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item{
    width: calc((100% - 60px) / 4);
    margin-bottom: 20px;
    padding: 15px;
    text-align: center;
    background: #e8c72e;
    box-sizing: border-box;
}

最後の行のコンテンツが4つの場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後の行のコンテンツが1つの場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後の行のコンテンツが2の場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後の行のコンテンツが3の場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このように4カラムの場合、最後の行のコンテンツが2つの場合は左右に配置され、3つの場合は3つで均等に配置されてしまいました。

space-betweenを使う場合の対策

上の例で確認したように、コンテンツの数によっては違和感のある配置になってしまいます。この並び順で良いということであれば、このままでも問題ないですが、よく見かけるのは左から順に配置されるものではないでしょうか。
justify-content: space-between;を使う場合、何もしなければ上の例のような配置になってしまいますが、これからご紹介する工夫をすることで、左から順に配置されるレイアウトにコントロールすることが出来るようになります。
HTMLの構造は変える必要はなく、CSSの指定のみで対応することが出来ます。

3カラムの場合

3カラムの場合は以下のようにします。

/* ★3カラムの場合の対策 */
.wrap::after{
    width: calc((100% - 40px) / 3);
    height: 0;
    display: block;
    content: "";
}

3カラムの場合、justify-content: space-between;を指定しているラッパー要素にafterの疑似要素を作成します。
これにより最後のコンテンツの次に、コンテンツと同幅の見えない空要素が配置されるため、最後の行は左揃えで配置することが出来ます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

4カラムの場合

続いて4カラムの場合は以下のようにします。

/* ★4カラムの場合の対策 */
.wrap::before,
.wrap::after{
    width: calc((100% - 60px) / 4);
    height: 0;
    display: block;
    content: "";
}
.wrap::before{
    order: 1;
}

4カラムの場合は3カラムの時よりも工夫が必要で、justify-content: space-between;を指定しているラッパー要素にbeforeとafter、ふたつの疑似要素を作成します。
before疑似要素はorderを指定します。orderを指定しないとbefore疑似要素はコンテンツの一番先頭に配置されてしまいます。
これにより最後のコンテンツの次に、コンテンツと同幅の見えない空要素がふたつ配置されるため、最後の行は左揃えで配置することが出来ます。

最後の行のコンテンツが2の場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後の行のコンテンツが3の場合は、

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.