Caniuse: Add justify-content: space-evenly

[Llbe]

• Supported in Firefox and Chrome 61 (or 60?)

• Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

• Known issue: in Chrome before support exists, space-evenly is still recognized but behaves as flex-start. Thus you cannot eg use @supports to detect support for space-evenly. See crbug.com/708121

[Schweinepriester]

Dup of #2537? Related #3580

[tobireif]

+1

[tobireif]

This page
http://caniuse.com/#search=justify-content
states that ~all browsers support justify-content, this more or less implies that they all support the very useful value "space-evenly" as well. It would be great if the support for "justify-content:space-evenly" would be listed explicitly, somehow.

[Schweinepriester]

this more or less implies that they all support the very useful value "space-evenly" as well.

This is atm. not correct, see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Browser_compatibility, as space-evenly is a new value.

Per https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

If you are familiar with flexbox then you will already have encountered the way in which flex items can be properly aligned inside the flex container. These alignment properties that we first met in the flexbox specification have been moved into a new specification called Box Alignment Level 3. This specification has details for how alignment should work in all of the different layout methods.

which is why I would argue this issue is a duplicate of #2537, as that issue requests box alignment level 3 as a whole. Unless each property and value (!) gets its own entry.

[tobireif]

It know it's a new value 😀

It would be great if the support for "justify-content:space-evenly" would be listed explicitly, somehow. And yes I'm aware that it's part of the CSS Box Alignment Module, so that would be the right place (and could be refd from the caniuse flexbox page).

[tobireif]

Related: https://twitter.com/TobiReif/status/884367115356172288

[SelenIT]

In fact, it worked in Chrome and Safari even earlier, but only for Grid, not Flexbox: https://twitter.com/frivoal/status/849198164665970688. The corresponding bug has already been fixed for both browsers.

[AdamEsterle]

Is there a way to use space-evenly and fallback to space-around?

div {
    justify-content: space-around;
    justify-content: space-evenly;
}

[tobireif]

It still would be great to be able to see browser support for space-evenly
https://www.w3.org/TR/css-align-3/#distribution-values
at caniuse.com ,
eg used with Flexbox https://www.w3.org/TR/css-align-3/#distribution-flex
and used with Grid https://www.w3.org/TR/css-align-3/#distribution-grid .

[brisourceful]

Agreed. It really should be explicitly stated that space-evenly is not supported by most browsers and mobile browsers on caniuse. Space-evenly is no longer a "new" value. It's also now supported on Chrome.

[GustvandeWal]

+1

[Fyrd]

Now available at https://caniuse.com/#feat=justify-content-space-evenly