フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

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

css
justify-content
space-between
フレックスボックス

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

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

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

まずは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;を指定しているラッパー要素にbeforeafter、ふたつの疑似要素を作成します。
before疑似要素はorderを指定します。orderを指定しないとbefore疑似要素はコンテンツの一番先頭に配置されてしまいます。
これにより最後のコンテンツの次に、コンテンツと同幅の見えない空要素がふたつ配置されるため、最後の行は左揃えで配置することが出来ます。

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

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

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

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

最後の行がちょうどの場合の疑似要素の挙動

疑似要素を用いて、空の要素を設定するとお伝えしました。

最後の行のコンテンツの数が、3カラムの場合は3、4カラムの場合は4だった場合、疑似要素が影響して変な余白が出来てしまうのではないかと思うかもしれませんよね。

それでは、この点を実際に見てみましょう。

3カラムの場合は、

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

4カラムの場合は、

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

このように3カラム、4カラムどちらの場合も疑似要素があってもレイアウト崩れ等は起こりません。

疑似要素の高さが0のため、余分な余白が出来ないということです。

5カラム以上の場合

4カラムまではCSSのみでコントロールすることが出来ましたが、5カラム以上についてはCSSのみではコントロールすることは出来ません。
5カラム以上の場合についてはあらかじめ空のコンテンツを用意したり、jQuery等で空要素を生成してコントロールする必要があります。

以下はあらかじめ空のコンテンツを用意したサンプルです。

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

まとめ

いかがでしたか?
3カラム、4カラムまでだったら、CSSのみで最後の行を左揃えにすることが出来ます。
justify-content: space-between;は凄く便利なプロパティなので積極的に使っていきたいですね。