【CSS】flexboxのgapプロパティが安定して利用可能に

去年（2021年）辺りから安定してきたflexboxのgapプロパティについて、今更ながら振り返ります。

flexboxにおけるgapとは

文字通り、flexレイアウトにおける要素間がどの程度離れているかを設定できます。2方向指定する場合は、縦方向と横方向の順です。

gridレイアウトのgap設定が、flexでも同様に使用できるようになりました。

.parent{
display:flex;
gap: 30px 20px;
}

.parent{
display:flex;
column-gap: 20px;
}

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

CSS Gap Space with Flexbox

gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法

対応ブラウザ

ここで紹介した理由でもありますが、ついにモダンブラウザで安定して使うことができるようになりました。

gap property for Flexbox | Can I use... Support tables for HTML5, CSS3, etc

メリット

各要素の余白をmarginなどで設けた場合、当然外側にもmarginが生まれます。

これにより従来まではmarginで余白設定する場合、ネガティブmarginの相殺で等間隔レイアウトを実装する必要がありました。

CSS | display:flexのgapで要素間の余白を指定する方法 | ONE NOTES

 以上、今更ながらの備忘録でした。