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

Flexbox gap property

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

レイアウトスペーシング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
flex context
84
84
63
14.1
84
14.5
flex context

フレックスレイアウトでサポートされています
84
84
63
14.1
84
14.5
flex context

フレックスレイアウトでサポートされています
84
84
63
14.1
84
14.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* You can also specify row-gap and column-gap separately */
  /* row-gap: 1rem; */
  /* column-gap: 2rem; */
}

ライブデモ

カード一覧の均一 gap

gap 一つでカード間の余白だけをそろえる基本形。

プレビュー全画面表示

row-gap と column-gap の分離

縦と横で別の余白を使い、情報のまとまりを強めるパターン。

プレビュー全画面表示

margin ハック不要のボタン列

子要素に margin を持たせず、親の gap だけで余白管理を完結させる。

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

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

フォールバック戦略

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

アクセシビリティ

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

参考リンク