flexbox/gap

ドキュメント:gap (grid-gap) - CSS: カスケーディングスタイルシート MDN

フレックスアイテム同士の隙間の幅指定。

gap: row columnで縦横の隙間を指定できる。gap: 10px;のような場合、rowとcolumn両方に同じ値を指定した状態になる。

<div style="display: flex; gap: 5px 15px; flex-wrap: wrap; width: 170px; height: 100px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
</div>
a
b
a
b