Ask any question about CSS here... and get an instant response.

Which browsers have issues with Flexbox's gap property, and how can I work around them?

Asked on Oct 10, 2025

Answer

The Flexbox "gap" property is widely supported in modern browsers, but there are known issues with older versions of some browsers, particularly Internet Explorer and early versions of Edge. A common workaround is to use margins to simulate the gap effect.

<!-- BEGIN COPY / PASTE -->
    <style>
      .flex-container {
        display: flex;
        /* Fallback for browsers not supporting gap */
        margin: -10px;
      }
      .flex-item {
        /* Fallback for browsers not supporting gap */
        margin: 10px;
      }
      @supports (gap: 10px) {
        .flex-container {
          margin: 0; /* Remove fallback margin */
          gap: 10px; /* Use gap if supported */
        }
        .flex-item {
          margin: 0; /* Remove fallback margin */
        }
      }
    </style>
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

Internet Explorer does not support the "gap" property for Flexbox.
Early versions of Edge (before Chromium-based Edge) also lack support.
The workaround uses negative margins on the container and positive margins on items to simulate gaps.
The "@supports" rule checks if the browser supports "gap" and applies it if available.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

Which browsers have issues with Flexbox's gap property, and how can I work around them?

Asked on Oct 10, 2025

Answer

The Q&A Network