【5分で完全理解】flexの間隔をgapを使って指定しよう

htmlでコンテンツを横に並べるときは、もはや「inline-blockやfloat」などよりも圧倒的にflexを使用することが多くなりましたよね。

今回はそんなflexを横に並べるときに便利なgapプロパティについて解説します。

CSS 「gap」 プロパティ　とは？

皆さんはこれまでflexアイテムの間隔を開けるときってどうしてましたか？
「justify-content: space-between」で間隔を広げてましたか？
それとも「margin」などで間隔を開けてる方が多いですかね。

ただ、margin-rightなどで間隔を開けるときって正直めんどくさいです。

例えば、「margin-right:10px」で指定したとして、そのままだと右端のboxにも隙間が出来てしまいます。
そのため、右端だけ0pxを指定するために、「:nth-of-type()」で折り返しの部分だけマージンを0にしないといけなかったりします。。

.box:nth-of-type(3n) {
　margin-right: 0; // わざわざ３番目だけ0に
}

他にも下方向のマージンについて考えないといけなかったり。。。。
とにかくめんどくさい(*´Д｀)

それを解決できるのが「gap」プロパティです。
前置きが長くなりましたが、解説致します。

「gap」は「flex」や「grid」で使用できる間隔を指定するプロパティです。
割と新しいプロパティであり、IE（インターネットエクスプローラー）には対応しておりませんでした。
ですが、2022年6月よりIEはサポートが終了しておりますので、今後はgapで指定する方法が主流になると思われます。

■can i use
https://caniuse.com/?search=gap
ほとんどのブラウザで対応しています。

「gap」プロパティを指定する

gap は　以下のように指定します。

/* 順番としては　行間　列館　で指定します。 */
gap: 20px 30px;

行間を20px 列間を30pxで指定できました。
便利な点としては、　行間と列間を直接指定できますので、marginを使用する方法と違って、折り返し部分や一番最後尾の要素のマージンなどを考えなくてよいということです。
ほんとにめんどくさかったので、これは嬉しいですね。

gapの縦横をまとめて指定する

ちなみに値を一つだけ指定すると、列間、行間とも同じ値になります。

/* 順番としては　行間　列館　で指定します。 */
gap: 20px;

「row-gap」、「column-gap」で指定する

また、行間、列間どちらかだけ指定したい場合は、それぞれ「row-gap」、「column-gap」プロパティがあります。

gap: 20px 30px;

/* それぞれ別に指定しました。
　 上で指定しているgapと同じ値になります。 */
row-gap: 20px;
column-gap: 30px

値の指定はpx以外でも可能です。
例えばPC画面の時はpxで固定して、スマホ表示の時は、画面幅に応じてvwや％で指定するなどの使い方が可能です。

％でgapを指定する

上項で説明したようにgapにはvwや％も指定可能です。
私はレスポンシブに対応するため％で指定することが多いです。

親要素の幅に応じてgapの値が指定される

gapを％で指定することによって、親要素の幅に応じてgapを縮小することができます。
ピクセルで指定すると簡単ですが、もし画面幅が「1000px」以下などになった際にピクセルだと、間隔が変わらないため大きく感じるはずです。

しかし、％で指定すると親要素のサイズに応じてgapの間隔も狭くなりますので、レスポンシブ的には％指定が良いです。

ｖｗでgapを指定してもいいの？

スマホ表示の時はvwでも良いと思いますが、pc表示を作成してる際は画面幅に応じて無限に間隔が広くなりますので、％の方が適しています。

％でgapを指定する際の注意点

そうか、ならば％で間隔を指定しよう。
と思いgapに％を指定されるかもしれませんが、注意が必要です。

横幅は間隔が空くけど、縦の間隔が広がらないということがあります。
これは、％指定だと親要素の高さに依存するためですが、親要素に高さが設定されていないと%で指定したgapも間隔が広がりません。

親要素に高さがない場合は、pxを使用したりmin関数と併用したvwを指定して対処しましょう。

まとめ

IE対応をしなくて良くなってから、どんどん新しい技術が使えるようになってきました。
何気にWeb制作を始めるのにはいい時期なのかもしれませんね。

また、別記事でflex要素の高さを揃える方法を解説しております。
今回のgapと合わせて奇麗で簡単に要素を並べてコーディングのスピードをアップしていきましょう。