フレキシブルボックスでカード型レイアウトをするとき、ネガティブマージンを使うと便利

フレキシブルボックス(flexbox)でカード型レイアウトをするとき、ネガティブマージンを使うと便利でした。

ネガティブマージンを使わなかったとき

例えば、カード型レイアウトのカード部分にmarginで空白を広げたときに、max-widthで幅を指定していた場合、他のパーツと端の並びがずれてしまいます。

カード型レイアウト
ネガティブマージンを使わなかったとき
<div class="container">
  <div class="grid">
    <article class="card">Card 1</article>
    <article class="card">Card 2</article>
    <article class="card">Card 3</article>
    <article class="card">Card 4</article>
    <article class="card">Card 5</article>
    <article class="card">Card 6</article>
  </div>
</div>
.container {
  max-width: 800px;
  margin: 0 auto;
  border: solid 2px #ccc;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  background-color: #f3f3f3;
}

.card {
  flex: 1 1 200px;
  margin: 10px;
  padding: 40px 0;
  background-color: #fff;
  text-align:center;
}

ネガティブマージンを使ったとき

.grid.cardと同じサイズのネガティブマージンを設定することで、端の部分の空白をなくすことができます。

ネガティブマージンを使ったカード型レイアウト
カード型レイアウトの外枠にネガティブマージンを設定したとき
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  background-color: #f3f3f3;
}