商品一覧や新着一覧のような、カード型レイアウトを使う場面は多々あります。
このようなレイアウトの際に、余白をどのように設定するのがよりスマートか考えました。

カード型レイアウトを実装したい

以下のような、アイテムが等幅・等間隔で並ぶデザインを実装したい。
商品一覧や新着一覧でおなじみですね。

space-betweenは汎用性に欠ける

flexアイテムを均等配置するには「justify-content: space-between;」が便利ですが、
アイテムが半端な数になった場合は、ぽっかりと空白が出来てしまうのでとても不自然になってしまいます。

nth-childを使う方法

【例】3列 × X行　のレイアウトの場合

・html

・css

 

レスポンシブのスマホ幅で列数を変える際は打ち消しが必要

【例】
PCでは　3列 × X行
スマホ幅では　2列 × X行
のレイアウトにしたい

このように、都度marginを調整する為の記述が増えるのが不便だなーと感じていました。

ネガティブマージンを使う方法

最もシンプルなのはflexアイテムの左右に均等に余白を入れる方法です。

但しこの方法だと、余白分、上限のコンテンツと幅が揃わなくなってしまいます。

 
そこで、flexアイテムを囲むflexコンテナに対し、
左右にマイナスマージンを付けます。
 

・css

 

これで、へこんだ分のマージンが相殺されて、上下のコンテンツと幅をそろえることができます。
スマホで列数が変わる場合も、flexアイテムのwidth（必要に応じてmarginも）を変えるだけでよくなります。

DEMO