Widely available YES。主要ブラウザすべてで対応済み。margin ハック不要で積極的に使える。
レイアウト Widely available

Flexbox gap property

従来 Flexbox でアイテム間の余白を設定するには margin を使い、最初・最後の要素の余白を打ち消す負のマージンハックが必要だった。gap プロパティによりアイテム間のみに余白が適用され、コードが簡潔になる。Grid で先行実装されていた gap が Flexbox でも使えるようになった。

レイアウトスペーシング

概要

従来 Flexbox でアイテム間の余白を設定するには margin を使い、最初・最後の要素の余白を打ち消す負のマージンハックが必要だった。gap プロパティによりアイテム間のみに余白が適用され、コードが簡潔になる。Grid で先行実装されていた gap が Flexbox でも使えるようになった。

対応ブラウザ

デスクトップ

Chrome 84+
Edge 84+
Safari 14.1+
Firefox 63+

モバイル

Chrome Android 84+
Safari iOS 14.5+
Firefox Android 63+

基本構文

CSS 
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* row-gap と column-gap を個別に指定も可能 */
  /* row-gap: 1rem; */
  /* column-gap: 2rem; */
}

実務での使いどころ

  • タグ・バッジの等間隔配置

    タグやバッジを flex-wrap で折り返しながら、gap で均一な間隔を保つ。margin の打ち消しが不要になる。

  • ツールバーのボタン配置

    ツールバー内のボタン群を均等な間隔で配置。gap 一行で余白管理が完結する。

注意点

  • Safari 14.1 未満では gap が Flexbox に非対応。古い Safari をサポートする場合は margin によるフォールバックを検討する。

フォールバック戦略

CSS 
/* gap 非対応環境向けフォールバック */
.flex-container > * + * {
  margin-left: 1rem;
}

アクセシビリティ

  • gap は純粋にビジュアルの余白制御であり、アクセシビリティへの直接的な影響はない。適切な間隔を設けることでクリックターゲットの分離に寄与する。

参考リンク