皆さんこんにちは、末ちゃんです。

今日はついにFlexboxのGapが次期リリース予定のChrome 84以降でサポートされるようになるため、記事にしてみます・・・が！
残念ながらまだSafariは対応してくれません。

え、IE11？彼は無理です。Microsoft公式に一切新機能を実装しないと言っているので、5年ほど前から時は止まったままです。忘れましょう。
ユーザーの皆さんはMicrosoft自身がInternet Explorer 11を規定のブラウザとして使用するのを控えるように勧告しているため、特殊な事情が無い限り使うのはやめましょう。

The perils of using Internet Explorer as your default browser / Microsoft Tech Community

いままでのFlexboxのGapの指定

今まではFlexboxを使用してグリッドレイアウトを実装するときのGapの実装は、marginやpaddingを駆使して行っていました。

例えば16pxのGapを設定したい場合は以下のように記述をしていました。

<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

<style>
  .grid {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
  }

.col {
  width: 33.3333%;
  height: 20px;
  padding: 8px;
}
</style>

ややハック的な実装ですね。

これからのFlexboxのGapの指定

しかしこれからはシンプルに以下のような記述ができます。

<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

<style>
  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

.col {
  width: 33.3333%;
  height: 20px;
}
</style>

コードもより直感的になりました！

Safariではまだサポートの予定がない

Safariは未だサポートの予定がないため、実地では使用できません。

しかしいずれpostcssのautoprefixerが変換してくれると淡い期待をしています。
そうなれば開発現場のソースベースではgapが使用できるため、少しだけ作業効率がよくなりますね。

まとめ

IE11のシェアは日本国内でも5%ほどに落ち込んできていると聞きます。
おそらく来年には開発現場でもIE11を対応しないことを選択するのも現実的になってくるかもしれません。

IE11対応は、下手するともう1サイト作るほどの手間がかかってしまう現状の中で嬉しい話しです。

モダンブラウザのみをターゲットに開発ができる世の中が楽しみですね。