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

@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>

Tags:

Html

Css

Safari

Recent Posts