Flexboxを使用して複数要素を横並び（もしくは縦並び）のレイアウトを実現する際、各要素間には余白を設定する場合が多いと思います。
その際、各要素にはmarginやpaddingを付与して余白を空けている方もいるのではないでしょうか。
自分もマークアップ時にはmarginで余白設定をしていた頃がありましたが、”gap”を使えばかなり簡単に同じレイアウトを実現できるので、ぜひ使用をおすすめします。
要素間の余白をmarginで設定する際の問題点
例えば、こんなレイアウトを実装したいとき。
gapを使わずにコーディングしようとすると、こんなコードになるかなと。
<div class="flex-wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>.flex-wrap {
display: flex;
}
.flex-item {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: blue;
margin-right: 40px;
}
.flex-item:last-child {
margin-right: 0;
}
自分は長らくこんな書き方をしていましたが、当時のモヤモヤポイントとしては、:last-childを使用して最後尾の要素のmarginを打ち消さなくてはいけない冗長さにありました。
そもそも、最後尾のmarginをつけっぱなしにしてあるサイトもよく見る気がしています。
今回のような横並びのレイアウトでは最後尾の意図しない余白により、想定していない要素の段落ちが起きてしまったり、縦並びでは、想定よりも上下方向の余白が大きくなってしまうなどの問題が生じますね。
gapにすればキレイに解決
さて、先のスタイル設定を”gap”を使用して改良してみます。
.flex-wrap {
display: flex;
column-gap: 40px;
}
.flex-item {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: blue;
}
display: flexを設定した親要素にcolumn-gapプロパティを付与し、小要素のmarginを外しました。故に、最後尾へのmarginの取り消しも不要になります。
今回使用したcolumn-gapは各要素の横方向の余白設定のためのもので、縦方向の余白にはrow-gapを使用します。
行・列両方に余白を設定したい際は、gap: 40px(縦方向) 20px(横方向) のように使用可能です。
このgap使用によるメリットは、記述の簡潔化に加え、あくまで要素間のみに余白を設定できる点ですね。両隣に要素がない最後尾には、余分な余白が設定されません。
主要ブラウザには問題なく対応
便利なCSSプロパティに出会うと、「各ブラウザの新しめのバージョンでは使えないんじゃ…」と考えてしまいがちですが、gapプロパティについては心配する必要がありません。
以下、”Can I use”による2023年1月現在の主要ブラウザバージョンでの対応状況です。
（IEはキャプチャの範囲からすらも外そうかと思いましたが一応入れました）
結論：flexレイアウトでの要素間の余白設定はgap一択
というわけで、今後はgapをたくさん使っていきましょうという記事でした。
こういう便利なプロパティに出会うと、普段習慣化していうスタイル設定の中にも、より効率的な記述があるかも…という気になってきます。
最新のスタイリング事情も積極的にキャッチアップしていきたいですね。