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

Flexbox gap property

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

レイアウトスペーシング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.column-gap.flex_context
84
84
63
14.1
84
14.5
CSS プロパティ
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; */
}

ライブデモ

cardOverview. uniform Gap

Gap one in cardbetween. marginonly basicshape.

プレビュー全画面表示

Row-gap and column-gap. separated

vertical and horizontal in by. margin use, info. and strongpattern.

プレビュー全画面表示

Margin knot-main. button column

childelement to margin, parent. Gap only in marginmanage completetie.

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

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

フォールバック戦略

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

アクセシビリティ

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

参考リンク