Flexbox Gap: Browser Support, Fallbacks, Known Issues

What is Flexbox Gap?

Flexbox Gap is the CSS gap property applied to a flex container, a shorthand for row-gap and column-gap defined in the W3C CSS Box Alignment Module Level 3. It sets the gutter between flex items without adding margins, so spacing stays consistent when items wrap, reorder, or change direction with flex-direction.

Which browsers does Flexbox Gap support?

Flexbox Gap works in every modern desktop and mobile browser, with global support around 95%. Internet Explorer 11 and Opera Mini never shipped the property, and Safari only added it in Safari 14.1 on macOS and iOS Safari 14.5 on iPhone.

What are the fallbacks for unsupported browsers?

The cleanest fallback for browsers without Flexbox Gap is a margin-based gutter wrapped in an @supports feature query, so modern browsers still get the native property and older browsers fall back to a calculated layout.

• Negative-margin container: Apply a negative margin equal to half the gap on the flex container and a positive margin of the same size to each child. The negative outer margin cancels the edge gutters so the layout aligns flush to its parent.
• :not(:last-child) margin: Add margin-right or margin-bottom to every flex child except the last one with the :not(:last-child) selector. The pattern works for single-row layouts but skips wrap rows, so reach for the negative-margin pattern when items wrap.
• @supports gating: Wrap the gap rule in @supports (display: flex) and (gap: 1rem) so only browsers that report support apply the native property. Pair the block with @supports not (gap: 1rem) for the margin fallback so the two paths never collide.
• Gap polyfill: Ship a small JavaScript polyfill like flex-gap-polyfill that walks the DOM, reads the gap value, and adds inline margins on the children. Load the polyfill behind a feature-detect guard so modern browsers skip the script entirely.
• Progressive enhancement default: Set the margin fallback as the base style and override it with the gap rule inside @supports. The order keeps the older browser layout correct without depending on selector specificity.

What are the known issues with Flexbox Gap?

Flexbox Gap is well supported now, but a handful of legacy quirks still bite teams that target Safari 14, the stock Android Browser, or React Native pre-0.71. Most of the issues come from silent failures rather than parsing errors, which makes them harder to spot.

• iOS Safari 14.4 silent failure: iOS Safari 3.2 to 14.4 ignores gap on flex containers without throwing, so a layout that uses gap renders with zero gutter and looks visually broken only on iPhone. Pair the rule with an @supports check or ship the margin fallback.
• Android WebView pre-84: Apps that embed Android WebView on Android 9 Pie and earlier ship a WebView build older than 84, which means gap on flex is unsupported even though Chrome itself works fine on the same device. Test in-app web views separately from the standalone browser.
• React Native pre-0.71: React Native added gap, rowGap, and columnGap in React Native 0.71. Older RN apps need margin workarounds on each child, and mixing the two patterns inside one screen leads to double spacing.
• Percentage gap on intrinsic sizing: Browsers resolve a percentage gap against the container size, but the container size is sometimes the result of intrinsic sizing, which can collapse the gap to zero on auto-sized flex containers. Use absolute units or rem when the layout depends on a fixed gutter.
• Bootstrap 4 has no gap helper: Bootstrap 4 ships row and col utilities that rely on negative margins. Bootstrap 5.3 adds a gap-* utility class that wraps the native property and falls back to the margin pattern on Safari 14 and earlier.
• Modernizr false positive: Old Modernizr builds report flexbox-gap support based on the grid-gap implementation alone, which is a false positive on Chrome 66 to 83. Use the runtime layout probe in the next section instead of relying on a stale Modernizr feature flag.
• flex-gap-polyfill versus subpixel rounding: JavaScript polyfills add margins as inline styles, and Safari rounds subpixel margin values differently than Chrome. The result is a one-pixel jitter on cards that fit edge to edge, so cap layouts at integer pixel widths during the polyfill window.

In my experience, the loudest gap bug on real-device runs is the iOS Safari 14.4 silent failure on a single legacy iPhone in a regression suite. The fix is to add the @supports gate on day one and to keep one iOS 14 device in the cross-browser grid until your traffic share for that build hits zero.

How do you detect Flexbox Gap support in a browser?

You detect Flexbox Gap support by combining a CSS @supports feature query with a small JavaScript layout probe that catches browsers which report gap as supported on grid but ignore it on flex. The steps below walk you through both checks.

• Open DevTools on the target browser: Launch DevTools on Chrome, Safari, Firefox, or Edge and switch to the Console tab. The same probe works in every browser that exposes a developer console.
• Run the layout probe: Paste the snippet below into the console. It builds a hidden flex container with a 1px row-gap, measures scrollHeight, and reports whether the browser honored the gap.
• Cross-check with CSS.supports: Run CSS.supports("gap", "1rem") in the same console session to see what the browser advertises. A mismatch between the layout probe and CSS.supports flags an old Safari or Modernizr false positive.
• Wrap the rule in @supports: In your stylesheet, wrap the gap declaration in @supports (display: flex) and (gap: 1rem) so unsupported browsers skip it. Add the margin fallback inside @supports not (gap: 1rem) so the two paths never collide.
• Confirm on a real device matrix: Run the same probe on iOS Safari 14.4, Samsung Internet 13, and Android WebView 83 to confirm the fallback path triggers. Real-device runs catch silent failures that emulator runs miss.

Paste this snippet into the DevTools console of any browser to see whether the engine honors gap on a flex container at runtime.

// Paste this into the DevTools console of any browser to check Flexbox Gap support at runtime.
function isFlexGapSupported() {
  const probe = document.createElement("div");
  probe.style.display = "flex";
  probe.style.flexDirection = "column";
  probe.style.rowGap = "1px";
  probe.appendChild(document.createElement("div"));
  probe.appendChild(document.createElement("div"));
  document.body.appendChild(probe);
  const supported = probe.scrollHeight === 1;
  probe.parentNode.removeChild(probe);
  return supported;
}

console.log("Layout probe :", isFlexGapSupported() ? "supported" : "falls back to margins");

// Modern browsers can also answer the same question via the CSS feature query API.
if (window.CSS && CSS.supports) {
  console.log("CSS.supports  :", CSS.supports("gap", "1rem") ? "supported" : "no native gap");
}

Citations

All Flexbox Gap version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - CSS gap property: developer.mozilla.org/en-US/docs/Web/CSS/gap
• MDN Web Docs - row-gap: developer.mozilla.org/en-US/docs/Web/CSS/row-gap
• MDN Web Docs - column-gap: developer.mozilla.org/en-US/docs/Web/CSS/column-gap
• W3C CSS Box Alignment Module Level 3: w3.org/TR/css-align-3
• WebKit blog - New WebKit features in Safari 14.1: webkit.org/blog/11649/new-webkit-features-in-safari-14-1
• Mozilla Hacks - Firefox 63 release notes: hacks.mozilla.org/2018/10/firefox-63-tricks-and-treats
• Chrome Platform Status - CSS gap on flex: chromestatus.com/feature/5093352798879744
• web.dev - Compat 2021 mid-year update: web.dev/blog/compat2021-midyear
• MDN Web Docs - @supports at-rule: developer.mozilla.org/en-US/docs/Web/CSS/@supports
• Wikipedia - CSS Flexible Box Layout: en.wikipedia.org/wiki/CSS_Flexible_Box_Layout