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

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

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

gap: 20px 30px;

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

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

【参考サイト】