← エラー辞典に戻る

CSS

CSSのgapが効かない（Flexbox）

gapを書く場所か親のdisplay設定に問題がある

こんな症状

gapを指定したのにアイテムの間隔が空かない。gapはdisplay:flexまたはgridの「親要素」にしか効かないのが原因のほとんどだよ。

まず試す

gap を書いた要素に display:flex（または grid）があるか確認。子要素に書いていたら親へ移す。

css
/* ✅ display:flex と同じ親要素に gap を書く */
.list {
  display: flex;
  gap: 16px;
}

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓親に display:flex を書き忘れている
    → gap と同じ要素に display:flex（または grid）を足す。
  • ✓gap を子要素（アイテム）に書いている
    → gap を親（コンテナ）要素に移す。
  • ✓DevToolsで gap に取り消し線が出る
    → 書く場所が違う合図。親要素の Styles に取り消し線なしで出るようにする。

なぜ起きる？

gapはFlexコンテナまたはGridコンテナ（display:flex / grid を指定した親要素）専用のプロパティだよ。よくある原因は、(1) 親要素にdisplay:flexを書き忘れている、(2) gapを子要素（アイテム側）に書いている、(3) gapを指定した要素とdisplay:flexを指定した要素が別、の3つ。なお主要ブラウザは2021年以降Flexboxのgapに対応済みなので、最近の環境でブラウザ対応が原因になることはまれだよ。

✕ エラーが起きるコード
/* ❌ gapだけ書いてもdisplay:flexがないと効かない */
.list {
  gap: 16px;
}

/* ❌ 子要素に書いても効かない */
.item {
  gap: 16px;
}
✓ 直したコード
/* ✅ display:flexと同じ親要素にgapを書く */
.list {
  display: flex;
  gap: 16px;
}

✅ 直ったか確認

アイテムを2つ以上置き、間隔が指定どおり空いていればOK（1つだと間隔は見えない）。

🆘 まだ直らないときは

古いブラウザ以外では2021年以降 Flexbox の gap は対応済み。最近の環境なら原因は書く場所。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

📖 この問題を学べるレッスン

CSSレッスン5：Flexboxでレイアウトで根本から理解する →

✏️ 手を動かして練習

このテーマの図解ドリルで実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 CSSレッスン5：Flexboxでレイアウトで根本解決しよう！

このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。

CSSレッスン5：Flexboxでレイアウトへ →

❓ 関連するQ&A