flexbox使用時に各item(子要素)間の余白を調整したい

flexboxを用いている時に、flex-item間、つまり子要素間の余白を取るときはgapという方法があるそうです。

例えば、横向きで並んでいる場合(デフォルト時)に

とすると、縦方向に20px、横方向に30pxの余白をとってくれます。

maginと違って、外側には指定されないようなので、便利そうです。

【参考サイト】

CSS | display:flexのgapで要素間の余白を指定する方法

CSSのflexbox（display:flex）でgapを利用して並べる要素間の余白・間隔を指定する方法を紹介しています。 See the Pen CSS flexbox gap by yochans (@yochans) on …

1-notes.com