Flexboxで最後の行を左寄せにするやり方

CSSのFlexboxでレイアウトを組むときflex-wrap: wrapで折り返しを行い、フレックスコンテナ(親要素)内部のフレックスアイテム(子要素)の配置をjustify-content: space-aroundやjustify-content: space-betweenなどのプロパティと値で指定することがあります。

このとき最後の行のフレックスアイテム数が少ない場合にはアイテム数に応じて均等に配置されるので上の行と比べた場合、不揃いに見えるので左寄せで均等にしたくなります。

Flexboxで最後の行がズレる例を1つ紹介してから、CSSの疑似要素でFlexboxの最後の行を左寄せにするやり方を説明します。

1. Flexboxで最後の行がずれる
2. 最後の行を左寄せにするやり方
3. Flexbox最後の行にbeforeも使う場合
4. 試みたFlexbox最後の行の左寄せ

Flexboxで最後の行がずれる

ulをフレックスコンテナにしてliをフレックスアイテムにしたFlexboxの場合です。

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

.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.flexbox li {
    width: 30%;
}

CSSでフレックスコンテナのulにクラス付けしたクラス名をセレクタにしてdisplay:flex;とflex-wrap:wrap;そしてjustify-content: space-around;を適用します。

フレックスアイテムのliにはコンテナの幅をwidthで調整して3カラムにします。

すると上の画像のようにFlexboxの最後の行は左寄せにならずspace-aroundの適用により各アイテムが均等に配置され、各アイテムの両側には半分の大きさの間隔ができてズレた感じの配置になります。

space-betweenを適用した場合にもFlexboxの最後の行は左寄せにならずに、各アイテムは均等に配置されて最初のアイテムは先頭に寄せられ、最後のアイテムは末尾に寄せらることになりズレたような配置になってしまいます。

上記のようなときにFlexboxの最後の行を左寄せにしたい場合にはCSSの疑似要素を使用するやり方があります。

最後の行を左寄せにするやり方

まずはFlexboxで最後の行の要素が2つの場合に左寄せにするやり方です。上の画像のように最後の行の最後尾にCSSの疑似要素を作成して、ズレたスペースを穴埋めすることで左寄せにします。

.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.flexbox li {
    width: 30%;
}

.flexbox:after {
    content: "after";
    width: 30%;
    margin: 8px;
    color: aliceblue;
    background-color: #f44336;
}

CSSでフレックスコンテナにしている親要素と疑似要素のafterでセレクタを作成し、フレックスアイテムに適用している要素の幅と余白を同じに指定します。

今回は説明用としてcontentの値はafterという文字列を表示させていますが、実装するときはcontentの値を空指定します。

すると以下の画像のようにFlexboxで最後の行を左寄せにすることができます。

Flexbox最後の行にbeforeも使う場合

折返した最後の行でフレックスアイテム1つ分を穴埋めするだけならCSSのafterだけでFlexboxの最後の行を左寄せにすることができますが、3カラムでも4カラムでも最後の行の要素数がカラム数によっては、2つ分の穴埋めをする要素を作成して左寄せする場合があります。

たとえば4カラムで折り返した最後の行の要素数が2つの場合、2つ分の穴埋めをする要素が必要になるためafterだけではなくbefore疑似要素も使用してFlexboxの最後の行を左寄せにします。

.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.flexbox li {
    width: 30%;
}

.flexbox:after {
    content: "after";
    width: 30%;
    margin: 8px;
    color: aliceblue;
    background-color: #f44336;
}
.flexbox:before {
    content: "before";
    width: 30%;
    margin: 8px;
    order: 1;
    color: aliceblue;
    background-color: #f44336;
}

Flexbox最後の行にbeforeも使う場合のやり方は、CSSでフレックスコンテナにしている親要素と疑似要素のbeforeでセレクタを作成し、フレックスアイテムに適用している要素の幅と余白を同じに指定します。

そしてbeforeの場合はorder: 1;を記述します。

.flexbox:beforeにorder: 1;を適用するのはフレックスコンテナの中のフレックスアイテムは初期値がorder:0なため一番大きな値にしてbefore擬似要素の配置を最後尾に並び替えするために必要です。