1年待った。Safari がやっと Flexbox の gap に対応した
05/02/2021(05/02/2021)はじめに
4/26/2021 の Safari on iOS 14.5 と Safari 14.1 で、 gap property for Flexbox が対応した。
ずっと待っていた機能なので、個人的ベストプラクティスとして記事に残す。
結論
主要ブラウザ（以下）の全てで display: flex; gap: 1em; をポリフィルなしで書けるようになった。
ポートフォリオ制作の 1 年前からずっと待っていた機能なので、まじで嬉しい。
スペースを開けるために、わざわざフクロウセレクタ1 等の Hack が必要で、割りに合わなかった。
gap を使うことで、簡単に他の要素と左揃えしながら、スペースを指定できる。 以前の記事であげた padding、margin の問題 を、gap プロパティで解決できる。
主要ブラウザは、独断と偏見で以下とする。 なお、異論は受け付ける。 ただし、 IE 、お前はだめだ。 事実上サポート切れてるからな。
- Edge
- Firefox
-
Chrome
- Chrome for Android
-
Safari
- Safari on iOS
以下に、使用例を提示する。
Flexbox gap 使用例
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>React</h1>
<div class="concept">
<h2>宣言的な View</h2>
<h2>コンポーネントベース</h2>
<h2>一度学習すれば、どこでも使える</h2>
</div>
</main>
</body>style.css
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.concept {
display: flex;
gap: 0 2em;
}
注意点
-
ユーザの Safari アップデートを待つ必要がある
- Safari on iOS 14.5+
- Safari 14.1+
まとめ
主要ブラウザで、Flexbox 要素の gap プロパティが対応した。 フクロウセレクタなどの Hack なしで、簡単に別の要素と左揃えしながら、スペースを開けた横並びを実装できる。
ユーザが Safari をアップデートするのが楽しみである。