余白といえばmarginやpaddingですが、gapでも余白がとれます。
※ただしdisplay: flex;かdisplay: grid;を指定している場合のみ
メディア型やカード型のレイアウトとかめちゃ便利です！
使い方
index.html
<ul class="hoge_list">
<li class="hoge_item">gap便利だよ</li>
<li class="hoge_item">gap便利だよ</li>
<li class="hoge_item">gap便利だよ</li>
<li class="hoge_item">gap便利だよ</li>
<li class="hoge_item">gap便利だよ</li>
<li class="hoge_item">gap便利だよ</li>
</ul>
style.css
// インナー幅 1024px
.hoge_list {
display: flex;
flex-wrap: wrap;
gap: 24px 32px;
}
.hoge_item {
width: 320px;
background: #ccc;
padding: 50px 20px;
text-align: center;
}
結果
gap: 行間（row-gap） 列間（column-gap）;
※片方しか指定してないときは空いている部分の余白を取ってくれる
これでnth-childとかlast-childなども使用しなくていいし、記述も減らせます！
↓参考にさせてもらった記事はこちら
https://ics.media/entry/210628/
↧