How to detect partial support for space-evenly in Edge

Question

I'm currently using the following code to use space-evenly where available:

 display: flex;
// IE11: doesn't support space-evenly.
justify-content: space-around;

@supports (justify-content: space-evenly) {
    // Use space-evenly if supported.
    justify-content: space-evenly;
}

Unfortunately Edge supports space-evenly but it doesn't display correctly.

From research, Edge supports it within CSS Grid only, not within flexbox. https://caniuse.com/#search=space-evenly

Q: How can I detect this scenario?

Unrelated, but a: x; @supports (a: y) { a: y; } is redundant - CSS itself encourages you to simply write a: x; a: y; and let browser error handling and cascade resolution do their thing. (Of course, the solution to this problem will almost certainly not involve at-supports in the first place, but I thought it was a neat little FYI.) — BoltClock, Feb 26 '19 at 18:27

score 10 · Answer 1 · edited Feb 20 '20 at 20:24

Because Edge does recognize space-evenly for CSS Grid, but not Flexbox, an @supports won't work in the normal way in this case.

Edge does recognize space-between, so what I did in a similar case was to set justify-content: space-between as the default and then follow with a @supports not using something only Edge would support to be able to use space-evenly in other browsers. So my final code looked something like:

.className {
  justify-content: space-between;
}

@supports not (-ms-ime-align: auto) {
  .className {
    justify-content: space-evenly
  }
}

This makes it so all browsers that don't support the Edge-specific CSS will use space-evenly. And if you need to add other things, like padding/margin on the outsides so space-between still shows some room around the edges, you can add it into the default styling then remove it within the @supports.

score 1 · Answer 2 · answered Feb 27 '19 at 07:10

Try to use the space-between to mimicking space-evenly, like this:

<style type="text/css">
    .parent {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border: 1px solid darkred;
        margin-bottom: 30px;
    }
        .parent.evenly-like {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
            .parent.evenly-like:before,
            .parent.evenly-like:after {
                content: '';
                display: block;
                width: 2px;
                background-color: red;
            }
    .item {
        padding: 10px;
        color: white;
        background-color: slateblue;
        outline: 1px dotted darkblue;
    }
</style>
<h1>Mimicking space-evenly with space-between</h1>
<div class="parent evenly-like">
    <div class="item">1 lorem</div>
    <div class="item">2 lorem</div>
    <div class="item">3 lorem</div>
    <div class="item">4 lorem</div>
    <div class="item">5 lorem</div>
</div>

The result as below:

score 0 · Answer 3 · answered Jan 25 '21 at 04:05

0

I have encountered the same issue.

What I did is that I have set the width of the elements inside the flex container to 100%

.container{
  justify-content: space-between;
}

.container .child-elements{
  width: 100%;
}

answered Jan 25 '21 at 04:05

davecar21

2,606
21
33

How to detect partial support for space-evenly in Edge

3 Answers3