Flexboxとネガティブマージンでカード型レイアウトを実装する方法！

カード型レイアウトはwebサイトを作る上でよくあるUIの1つです。

実装方法は色々ありますが、この記事ではFlexboxとネガティブマージンを使った方法を紹介します。

この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。

CSS Flexbox の使い方をどこよりも詳しく解説！図解やサンプルもあり！

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

実務のレベル感を知りたい
プロの制作フローを学びたい
基礎学習中、もしくは終えたばかり
CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

この記事の目次

実装したいデザイン

このようなレイアウトを実装します。画像は3カラムになっていますが、4カラムまで対応します。

ビューポート	カラム
~500px	1カラム
500px~800px	2カラム
800px~1000px	3カラム
1000px~	4カラム

デモも作ったので幅を変えて確認してみてください。

DEMO

space-betweenを使う方法の問題点

余白を均等にする方法で1番最初に思い浮かぶのが、justify-content: space-between;ではないでしょうか？

しかし、管理者やユーザーが投稿するコンテンツでは投稿数がいくつになるか分かりません。justify-contentを使った方法では特定条件で不自然なレイアウトになります。

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

.posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.posts-item{
    width: 32%;
}

上のコードは、特定条件で不自然なレイアウトになる書き方です。

カラム数のn倍の投稿数がある場合は問題ありません。

カラム数のn倍の投稿数でない場合、不自然なレイアウトになってしまいます。

justify-contentで均等に余白を作る方法は、flex アイテムの個数があらかじめ決まっているものでないと、このような問題が起きます。

nth-childや擬似要素を使う方法について

justify-contentの問題を解決する方法として、nth-childを使う方法や擬似要素を使う方法がありますが、個人的にどちらも少しややこしかったり、不便に感じます。

nth-childを多用すると分かりにくくなる
擬似要素を使った方法は4カラム以上で使えない、かつ他で擬似要素を使いたい時に不便

これらが個人的にあまり好きじゃない理由です。

詳しくは解説しないので、興味がある方は調べてみてください。そして今回紹介するネガティブマージンを使った方法と比べてみてください。

ネガティブマージンでカード型レイアウトを実装する方法

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

.posts {
    margin-top: -40px;
}

.posts-item {
    padding-top: 40px;
}

@media screen and (min-width: 500px) {
    .posts {
        display: flex;
        flex-wrap: wrap;
        margin: -40px 0 0 -24px;
    }

    .posts-item {
        width: 50%;
        padding: 40px 0 0 24px;
    }
}

@media screen and (min-width: 800px) {
    .posts-item {
        width: 33.33333%;
    }
}

@media screen and (min-width: 1000px) {
    .posts-item {
        width: 25%;
    }
}

カードの上と左の余白はpaddingで40pxと24pxに設定しています。ただし、このままだとflexコンテナに接する上側の余白と左側の余白が邪魔です。従って、その邪魔な余白をflexコンテナ側でネガティブマージンを使って相殺しています。

図にするとこのようなイメージです。

posts-itemのwidthはcalcを使うとIEでカラム落ちする場合があるので、使っていませんが、IE無視で良ければcalcを使った方がより簡単です。

<div class="posts posts--col4">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

普段はこのように、バリエーションクラスを使って最大カラム数が4の時は、posts--col4を付与するような運用にしています。

背景色を入れることも考慮したコーディング

このようにカードに背景色を入れたい場合もあると思います。前述したやり方では、図のような形になりません。

<div class="posts posts--col4">
    <article class="posts-item">
        <div class="post">...</div>
    </article>
    ...
    <article class="posts-item">
        <div class="post">...</div>
    </article>
</div>

/* 追加 */
.post {
    background-color: #ddd;
    height: 100%;
}

posts-itemの中にpostを作って、postに対して背景や余白をつけると思い通りになります。height: 100%;がないとコンテンツによってカードの高さがバラバラに見えてしまうので入れています。

gapを使っても実装可能！

2021/4/26のSafari / iOS のアップデートで、Flexboxで使用するgapプロパティがSafariでも使えるようになりました。IE対応が必要ない場合はgapプロパティを使っても実装できます。

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

.posts {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 24px;
}

.posts-item {
    width: 100%;
}

@media screen and (min-width: 500px) {
    .posts-item {
        width: calc((100% - (24px * 1)) / 2);
    }
}

@media screen and (min-width: 800px) {
    .posts-item {
        width: calc((100% - (24px * 2)) / 3);
    }
}

@media screen and (min-width: 1000px) {
    .posts-item {
        width: calc((100% - (24px * 3)) / 4);
    }
}

これだけです。