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

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

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

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

Flexboxで最後の行がズレる例を1つ紹介してから、CSSの疑似要素で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の疑似要素を作成して、ズレたスペースを穴埋めすることで左寄せにします。

 

Advertisement
.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擬似要素の配置を最後尾に並び替えするために必要です。

 

 

記述後にフレックスアイテムの配置を確認すると最後の行が左寄せにできているのを確認できます。

やり方の考え方は、何カラムの場合はとパターンで考えるより「最後の行に配置された要素の数を見ていくつ分を穴埋めすればいいのか?」と考えたほうが簡単かもです。

逆に考えれば、最後の行で埋めるスペースが2つを超えるとフレックスアイテムと同じ幅の疑似要素では対応できなくなることになります。

 

Advertisement

 

試みたFlexbox最後の行の左寄せ

 

Flexboxで最後の行を左寄せするやり方で試みたことを少し書いておきます。

 

 

何カラムになろうとCSSで疑似要素のafterだけを適用して必要な幅に値を指定しておくやり方にしても良いのかもしれないと思いました。

もしくは疑似要素は他に使うことになるかもしれないのでFlexboxで最後の行を左寄せにするための空要素を用意してvisibility: hidden;にしておけば、見えない要素を配置できるので良いとも思えます。

Flexboxの折り返し付き横並びをスマホ画面で縦一列にレイアウト切り替えした場合も試しましたが、空要素の高さ分の余白ができてしまうのでメディアクエリでdispaly:noneにスタイルを切り替えることになりますね。

要素数が動的に増える場合は修正が大変になるのでJavaScriptとかで実装するしかなさそうです。

CSSカテゴリの最新記事