【CSS】コンテンツ数に左右されない！display:flexで最後の要素だけ左寄せする方法

しゃけちゃん

公開日：2020.07.20

更新日：2020.07.20

WEB制作全般

コンテンツを横並びレイアウトする際にとても便利な「display:flex」。
合わせて「justify-content: space-between」を指定すれば、コンテンツをページ内で自動的に均等配置してくれるので便利です。

しかし、念頭に入れておきたいのがこの「均等配置」という点。

例えば横並びにコンテンツを3つ並べる想定で「display:flex」「justify-content: space-between」を指定していたとします。

この時、表示するコンテンツ数が5つの場合2段目のコンテンツは2つしかありませんが、均等配置だと以下のようになってしまいます。

真ん中が空いてしまってなんだか不格好。2段目の最後のコンテンツが左寄せになってくれればすっきりですよね。

今回は「display:flex」「justify-content: space-between」を使用したときの、コンテンツの数に左右されないCSSの記述方法についてご紹介します。

Contents

1 「均等配置」ではなく「左寄せ」にする方法だとうまくいかない？
2 均等寄せのまま一番最後のコンテンツだけ左寄せする方法
3 4カラム構成の場合は？
4 5カラム以上になるとCSSだけでは制限できない
5 まとめ

「均等配置」ではなく「左寄せ」にする方法だとうまくいかない？

「justify-content: space-between」ではなく「justify-content: start」を指定して、コンテンツを左寄せにするという方法も浮かんできます。

「justify-content: start」を指定した場合の表示は以下のような感じ。

この場合は、マージンを自分で調整する必要が出てきますが、意図しない表示になることもあります。（下の画像の斜線部分がマージンを指定した幅と想定してください）

「3番目のコンテンツだけマージンを削除して…」という個別の指定はCSSが複雑化する可能性がありますので適切ではありません。

ブログなど、更新が発生するページでこうしたレイアウトを採用する可能性もあります。
コンテンツ数が増減する場合などもありますので、「均等寄せのまま一番最後のコンテンツだけ左寄せ」を実現できたら一番いいですよね。

均等寄せのまま一番最後のコンテンツだけ左寄せする方法

HTMLとCSSの記述内容はこちら。

<div class="flexbox">
    <section class="box">
        <!-- コンテンツの内容がここに入ります -->
    </section>
    <section class="box">
        <!-- コンテンツの内容がここに入ります -->
    </section>
    <section class="box">
        <!-- コンテンツの内容がここに入ります -->
    </section>
    <section class="box">
        <!-- コンテンツの内容がここに入ります -->
    </section>
    <section class="box">
        <!-- コンテンツの内容がここに入ります -->
    </section>
</div>

今回は「display:flex」を指定したい要素を”flexbox”というclass名で括り、その中のコンテンツに”box”というclass名を指定しました。class名はお好みでつけてください。

.flexbox {
    flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    display: flex;
    justify-content: space-between;
    align-items: top
}

.flexbox .box {
    width: 32%;  /* お好みの幅で指定 */
    padding:16px;  /* お好みの幅で指定 */
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
}

/* 最後のコンテンツを左寄せにする指定 */
.flexbox:after {
    content: "";
    display: block;
    width: 32%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

画面幅100%に対してコンテンツ幅を32%に指定しています。 paddingを設定する際はbox-sizingの設定も一緒に指定しておきましょう。コンテンツ内にpadding設定することも多いと思うので、今回の内容では余談となりますが合わせて記述しました。

class名”flexbox”を指定した要素に疑似要素にコンテンツ幅と同様の幅を設定することで、最後のコンテンツが左寄せになります。

スマホ画面ではコンテンツを縦並びにしたいという際には

.flexbox{
    display:block; 
}

.flexbox　.box{
    width: 100%;
}

とすればOK。
疑似要素の高さは0なので、最後のコンテンツの下に余計な余白が表示されることもありません。

4カラム構成の場合は？

先ほどのコードでは、コンテンツが4つ並んでいる場合には以下のようになってしまいます。

4つ並びのときにも同じようにレイアウトを整えたい場合は、疑似要素「:before」も合わせて指定します。

CSSコードに、以下を追加してください。

.flexbox:before {
    content: "";
    display: block;
    width: 32%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
    order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}

見た目上は見えないですが、疑似要素「:before」「:after」の表示場所は以下の通り。