Contents
gapとは
gapとはmarginなどのように余白を指定するプロパティになります。
gapはFlexboxおよびCSS Gridで要素間の空きを設定できます。
gapで指定する空きには２種類あり
縦の列間を指定するgapを「column-gap」、横の行間を指定するgapを「raw-gap」といいます。
gapの書き方
列幅のみの指定
colmun-gapを使用することで設定ができる。
display: flex;
colmun-gap:30px;行間のみの指定
raw-gapを使用することで設定ができる。
display: flex;
raw-gap:30px;同時に指定
gapを使用することで設定ができる。
※下記の場合、gap:行間 列間;となる
display: flex;
gap:30px 40px;See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
gapの使用例
グローバルメニューを作る際などにgapが役に立ちます。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
従来のようにmarginなどで設定していくと、両端の余白がいらない部分に余白がついてしまい、行数が多くなったり、justify-content: :space-between;などで空きの余白を指定しても、うまい具合に調整できませんでした。
そこで、そのコードたちをgapに置き換えることで、コードも1行で済み、自分が開けたい余白を指定できるメリットがあるので、とても便利なプロパティだと思います。
