flex row-gapでパーセント値が効かない時の対処法

はじめに

flexをレスポンシブに実装する時、row-gapにパーセント値が効かなかったため、その時はvwを使用すればよいと知ったので、その内容について共有します。

おさらい

今回に出てくるgapと長さの単位についてざっくりおさらいします。

gap

gapは flexやgrid等のすき間の大きさを決める cssのプロパティで、わざわざmarginやnth-childを使って余白調整しなくても良くなります。

詳しくはこちら

長さの単位

cssで使用する長さの単位は 絶対長の単位 と 相対長の単位 に分類されています。

• 絶対長：px（ピクセル）、pt（ポイント）、cm（センチメートル）
• 相対長：%（パーセント）、vw、em

絶対長は他の長さとの関係で決まらず一定の値で、相対長は親要素のフォントサイズや画面幅といった何かとの比較でサイズが決まり、基準となる要素の大きさを変更することで相対的に変化します。

詳しくはこちら

%を使った余白指定

flexのgapを%指定で実装してみます。
使用したhtml,cssは以下の通りです。

html

<div id="flexbox">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>

css

 #flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap:10% 10%;  /*row-gap,column-gapを%で指定*/
 
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

結果

row-gapは正常に効きましたが、column-gapは効きませんでした。

vwを使った余白指定

今度はvwを使ってgapの指定をしてみます。

css

 #flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap:10vw 10vw;  /*row-gap,column-gapをvwで指定*/
 
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

結果

row-gap、column-gap共に効いていることが確認できました。

注意点
vwの性質上、画面幅がコンテンツ幅より大きくなるとgapが大きくなりすぎるため、ある程度のブレイクポイントで絶対長を使ってgapを指定する必要があります。

まとめ

flexをレスポンシブデザインにするため、gapを相対長のvwwを使って実装してみました。
ただ、根本の％（パーセント）指定が効かない原因については調べてもわからなかったため、分かり次第追記しようと思います。

参考

mdn web docs -gap(grid-gap)
https://developer.mozilla.org/ja/docs/Web/CSS/gap

mdn web docs -CSS の値と単位
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units