How to make CSS justify-content:space-evenly fallback to space-between on Safari?

Question

I'm building a webpage and running test against different browsers, one of the designs involves a flexbox and space-evenly, I know this is not widely supported yet, so as a fallback I'm using space-between like this:

.some_element { display:flex; justify-content:space-between; justify-content:space-evenly; } 

Above code works correctly on: Firefox, Chrome, IE11, Edge but fails on Safari.

Safari does understand and recognize the space-evenly property but does nothing with it, in other words the result is the same like: justify-content:initial;

Officially Safari doesn't support -webkit-justify-content so I thought I will be cleaver and try the fallback as this:

.some_element {     display:flex;     justify-content:space-between;     -webkit-justify-content:space-evenly;     -moz-justify-content:space-evenly;     } 

But again Safari does understand it and it renders it same like initial. Same happens on iOS, which makes my website design fall apart.

Aesthetically the space-evenly looks better so I will really like to take advantage of it on browsers which support this, so I'm not to keen on dropping it because of Apple. On the other hand, Apple users are a significant part of the visitors so I cannot ignore the problem and leave the page render with the initial look.

Answer 1

@supports is of no help, see my comment above (hey Apple, can you remind me what was the point of this feature? Sigh) but you can have the same layout with :pseudos and space-between.
The only constraint is you can't use pseudos on the flex container for anything else.

➡️ Codepen

➡️ Relevant code:

.evenly-like {   display: flex;   justify-content: space-between;    &:before,   &:after {     content: '';     display: block;   } } 

With 5 items, there are 6 "spaces" equally wide with space-evenly and 4 with space-between (and half + 4 + half with space-around).
By creating 2 :pseudos on the flex container and given they're considered flex items by teh power of Flexbox, with space-between there are now 5+2 = 7 items thus 6 equally wide "spaces", problem solved.

➡️ Complete snippet:

/* /!\ Pasted from compiled Scss in Codepen with Autoprefixer. Your browserslist is probably not as complete as that one :) */    .parent {    display: -webkit-box;    display: -ms-flexbox;    display:     flex;    border: 1px solid darkred;    margin-bottom: 30px;  }  .parent.evenly {    -webkit-box-pack: space-evenly;       -ms-flex-pack: space-evenly;     justify-content: space-evenly;  }  .parent.around {    -ms-flex-pack: distribute;        justify-content: space-around;  }  .parent.between {    -webkit-box-pack: justify;       -ms-flex-pack: justify;     justify-content: space-between;  }  .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;  }

<h1>space-evenly</h1>  <div class="parent evenly">    <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>    <h1>Mimicking space-evenly with space-between: and :pseudos</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>    <hr>    <h1><i>space-around</i></h1>  <div class="parent around">    <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>    <h1><i>space-between</i></h1>  <div class="parent between">    <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>

Answer 2

/*for ie*/ justify-content: space-around; /*for moz & chrome*/ -webkit-justify-content: space-evenly !important; 

justify-content property in ie