How to Check for Gap Support in Flexbox Layout

Question

Firefox has implemented gap for flexbox layout, while other browsers such as Chrome only support gap for grid layout. This causes differences between browsers if you add gap on a flexbox container. The CSS @supports feature was made to handle situations where browsers do not yet support certain features. So how do you test for support of gap in flexbox?

<style>
.flex {
  display: flex;
  gap: 20px;
}
</style>

<section class="flex">
  <div>Item One</div>
  <div>Item Two</div>
</section>

Please note: Even if I use @supports grid-gap instead of gap, Firefox will still apply the gap to the flexbox container, while Chrome won't apply anything, so that solution won't work.

I am looking for consistency, as this is going to be a huge problem going forward if we start applying gaps to flexbox containers, and it works in newer implementations by browsers, but not in older implementations of the spec with no way of testing for support.

I am NOT looking for a JavaScript solution.

Reservist

why not building the layout with supported features until gap is well supported? – Kaunas

for flexboxes gap is relevant only layouts where flex items filling the flex axis and if they wrap into multiple lines.. why not use margin instead - see some examples here, here and here – Minta

The layout is already built using flexbox and margins as a default for browsers that don’t support grid. For browsers that do support grid, there is progressive enhancement (using @supports) to use gap and grid and get rid of the margins. The problem is Firefox supports grid but it also supports gap on flexbox. So I can’t get rid of the negative margins. So is there no way to differentiate between browser CSS support for gap in flexbox without JavaScript? Because this is exactly what @supports was supposed to be designed to do. – Reservist

Answer 1

As far as I understand, there is no way to achieve this. It is still an open discussion

https://github.com/w3c/csswg-drafts/issues/3559.

https://medium.com/@schofeld/mind-the-flex-gap-c9cd1b4b35d8

Additional note: you'd probably want to star the request to add support on Chromium:

https://bugs.chromium.org/p/chromium/issues/detail?id=762679

Escort

Answer 2

Old post, but anyway - besides new MacOS and iOS support of "gap" for Flexbox you still need to provide it for older versions of MacOS and iOS. Basically, simple check with @supports (gap: ... ) will not give anything correct because Safari thinks "oh, thats a gap in Gridbox". But - if you need to make this check - you won`t need to check support for "gap". You can write previously modern code with all that "gap" and then just use @support not (aspect-ratio: 1 / 1 ) (for example - you just need to check if old Safari really doesnt support such css tag ) - and then inside you can write a fallback options for old Safari. It works great)

Preinstruct

Answer 3

Disclaimer: I'm not saying it's a perfect solution, but it is decent enough if you can allow for a very tiny margin of error. I would only use this to get some pixel perfect gaps here and there, I would NOT use this if your layout rely heavily on this to keep your page together.

An article out there mentions the use of @supports selector(:first-child) which can act as a proxy for support for flex gap, since the timeline release is identical:

• flex gap support: https://caniuse.com/flexbox-gap (92.64% as of today)
• @supports selector() : https://caniuse.com/?search=selector() (92.59% as of today)

For me it does the job very well if used properly, but you need to evaluate based on your project. More details available and credits goes to this article: https://birdsong.dev/blog/sloppy-supports-for-flexbox-gap/

Nadbus

Answer 4

From a comment in the github link in the current most upvoted answer, it is suggested to use @supports (inset: 0) as it very closely approximates the browser support for gap + flexbox.

To quote the github comment

@supports (inset: 0) will not target any browsers which don't support flex gap. The @supports check will also not target some browsers which do support flex gap: Chrome [84, 85, 86], Firefox [63, 64, 65], or Opera [70, 71, 72]. Support in WebKit matches perfectly.

Considering Chrome, Firefox, and Opera are evergreen browsers, the amount of people stuck on those versions should be negligible for most cases.

In my case, I used this to add margins where necessary in place of gap

gap: 20px;
@supports not (inset: 0) {
  > *:first-child {
    margin-right: 20px;
  }
}

Permittivity

works pretty nicely for some older safari versions, thanks! – Asa