Styjun

What is this "opened" cube called?

Which is the correct version of Mussorgsky's Pictures at an Exhibition?

Why don't 3D printer heads use ceramic inner walls?

Small RAM 4 KB on the early Apple II?

Lob Logical Read and lob read-ahead reads in NCCI

Could a complex system of reaction wheels be used to propel a spacecraft?

Can I leave a large suitcase at TPE during a 4-hour layover, and pick it up 4.5 days later when I come back to TPE on my way to Taipei downtown?

Why did I get UK entry stamps in my British passport?

Create a list of snaking numbers under 50,000

How to understand payment due date for credit card?

Padding a column of lists

Properly unlinking hard links

What should be done with the carbon when using magic to get oxygen from carbon dioxide?

What's the difference between a variable and a memory location?

How did medieval manors handle population growth? Was there room for more fields to be ploughed?

math mode in ticks ( tikzpicture )

How can I improve my formal definitions

Are sweatpants frowned upon on flights?

Which language is the closest lexically to Spanish?

Can inductive kick be discharged without freewheeling diode, in this example?

In Endgame, wouldn't Stark have remembered Hulk busting out of the stairwell?

How do I portray irrational anger in first person?

Understanding data transmission rates over copper wire

Ask one verbal question to figure out who is blind and who is mute among three persons

How to Check for Gap Support in Flexbox Layout

5 items per row, auto-resize items in flexboxSpacing between flex elements?Flex to ignore side margin when centering elementsHow to horizontally center a <div>?How do I give text or an image a transparent background using CSS?How to disable text selection highlightingHow to check whether a checkbox is checked in jQuery?How to make a div 100% height of the browser windowHow can I transition height: 0; to height: auto; using CSS?How to disable resizable property of textarea?How do CSS triangles work?How do I vertically center text with CSS?Flexbox: center horizontally and vertically

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

8

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.

html css css3 firefox flexbox

share|improve this question

edited Mar 28 at 1:20

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 27 at 22:59

DarylDaryl

4122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  why not building the layout with supported features until gap is well supported?
  
  – Temani Afif
  Mar 27 at 23:13
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  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
  
  – kukkuz
  Mar 28 at 1:20
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – Daryl
  Mar 28 at 14:16
  
  

  
  
  
  

add a comment | 

8

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.

html css css3 firefox flexbox

share|improve this question

edited Mar 28 at 1:20

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 27 at 22:59

DarylDaryl

4122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  why not building the layout with supported features until gap is well supported?
  
  – Temani Afif
  Mar 27 at 23:13
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  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
  
  – kukkuz
  Mar 28 at 1:20
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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.
  
  – Daryl
  Mar 28 at 14:16
  
  

  
  
  
  

add a comment | 

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.

html css css3 firefox flexbox

share|improve this question

edited Mar 28 at 1:20

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 27 at 22:59

DarylDaryl

4122 bronze badges

<style>
.flex 
 display: flex;
 gap: 20px;

</style>

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

share|improve this question

edited Mar 28 at 1:20

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 27 at 22:59

DarylDaryl

4122 bronze badges

share|improve this question

edited Mar 28 at 1:20

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 27 at 22:59

DarylDaryl

4122 bronze badges

edited Mar 28 at 1:20

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

edited Mar 28 at 1:20

kukkuz

34.3k77 gold badges2929 silver badges7272 bronze badges

asked Mar 27 at 22:59

DarylDaryl

4122 bronze badges

asked Mar 27 at 22:59

DarylDaryl

4122 bronze badges

1 Answer
1

active

oldest

votes

0

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

share|improve this answer

edited Jun 9 at 2:49

answered Jun 9 at 2:04

gian1200gian1200

2,90922 gold badges2323 silver badges5050 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387748%2fhow-to-check-for-gap-support-in-flexbox-layout%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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

share|improve this answer

edited Jun 9 at 2:49

answered Jun 9 at 2:04

gian1200gian1200

2,90922 gold badges2323 silver badges5050 bronze badges

add a comment | 

0

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

share|improve this answer

edited Jun 9 at 2:49

answered Jun 9 at 2:04

gian1200gian1200

2,90922 gold badges2323 silver badges5050 bronze badges

add a comment | 

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

share|improve this answer

edited Jun 9 at 2:49

answered Jun 9 at 2:04

gian1200gian1200

2,90922 gold badges2323 silver badges5050 bronze badges

share|improve this answer

edited Jun 9 at 2:49

answered Jun 9 at 2:04

gian1200gian1200

2,90922 gold badges2323 silver badges5050 bronze badges

answered Jun 9 at 2:04

gian1200gian1200

2,90922 gold badges2323 silver badges5050 bronze badges

answered Jun 9 at 2:04

gian1200gian1200

2,90922 gold badges2323 silver badges5050 bronze badges