Menu
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.
228
We use inline-flex to have flex items but display our parent element as an inline element instead of a block element. The flex-wrap: wrap property will allow our items to wrap as the parent container shrinks or is constrained. If we want to add space between each item, we could use margin on each item.
Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap . Gaps in Flexbox make it possible for web developers to create space between Flex items without resorting to annoying margin hacks. The gap property, of course, has worked inside Grid containers since Safari 12.
The break tag is meant for single line breaks, and not more than one in a row. If you want to add extra whitespace between pieces of text, use CSS padding and margins instead for cleaner code. Or, you can use an HTML <p> tag, as we'll see next.
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
67
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)
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
