【CSS】Flexboxでのgapの使い方

Safari等のブラウザで、サポートがされていなかったため、使う機会が無かったFlexboxレイアウトのgapプロパティですが、2021年4月末にSafari 14.1でのサポートが開始となり、全ての主要なブラウザでサポートされるようになりました。

1.Flexboxレイアウトでのgapとは

flexアイテム間の余白をまとめて指定する際に使用できます。
gapには1つまたは2つの値を指定します。

▼値が同じ場合

.flex-gap {
    display: flex;
    gap: 30px;
}

▼値が異なる場合
最初の値に縦方向のgapを設定し、2番目の値に横方向のgapを設定します。

.flex-gap {
    display: flex;
    gap: 45px 30px;
    /*
    row-gap: 45px;
    column-gap: 30px;
    */
}

2.実装サンプル

例えば、このようなレイアウトをmargin、gapそれぞれを使用して組んでみます。

▼marginを使用した場合
3,6番目の右の余白がいらないのでセレクタを使用し、margin-right:0;と指定します。
2段目（4,5,6番目）の下の余白がいらないため、ネガティブマージンを使用し、ulにmargin-bottom: -45pxと指定します。

デバイスによって、1行に表示するアイテム数を変更する時、li要素に指定するセレクタが増えてしまので、CSSが煩雑になってしまいます。

.flex-gap-container ul{
 display: flex;
 flex-wrap: wrap;
 margin-bottom: -45px;
}
.flex-gap-container ul li{
 margin: 0 5% 45px 0;
}
.flex-gap-container ul li:nth-child(3n) {
 margin-right: 0;
}

▼gapを使用した場合
flexアイテム間の余白を、gapで指定するだけ！
外側の余白調整をしなくていいので、ネガティブマージンなどの指定が不要になり、CSSがスッキリわかりやすくなりますね。

.flex-gap-container ul{
 display: flex;
 flex-wrap: wrap;
 gap: 45px 5%;
}

3.対応ブラウザ

主要ブラウザでサポートされています。（2021年5月20日現在）

▼Flexbox gapのサポート状況 | Can I use
https://caniuse.com/?search=gap

4.参考サイト

こちらの記事を参考にさせていただきました。
▼Safari 14.1 Adds Support for Flexbox Gaps | CSS-Tricks
https://css-tricks.com/safari-14-1-adds-support-for-flexbox-gaps/

▼gap | CSS-Tricks
https://css-tricks.com/almanac/properties/g/gap/