タイトル通り、display:flex; で横もしくは縦並びで並べた要素の余白を指定する方法についてです。
今まではやり方を知らなかったので、要素に margin を使って余白を指定していたのですが、最近になってようやく gap プロパティがあることを知りました。
参考にさせていただいた記事はこちら。
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 – ICS MEDIA
https://ics.media/entry/210628/
サンプルコードはこちら。
<div id='container'> <div class='item'>要素1</div> <div class='item'>要素2</div> <div class='item'>要素3</div> <div class='item'>要素4</div> </div>
CSS は下記のとおりです。
#container {
display: flex;
gap: 10px;
}
上記のように記述すると、横並びになった子要素が、余白 10px で並ぶようになります。
見ため的には、子要素に margin を指定しても、親要素で gap を指定しても同じようなレイアウトになりますが、個人的には gap を指定する書き方の方が好きです。
こちらに関してはお好みで使い分けてください。
以上、CSS の display:flex; で並べた要素間の余白を gap で指定する方法についてでした。
ご参考になれば幸いです。
