【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/
この記事が気に入ったらサポートをしてみませんか?