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 fal

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;
}

space-evenly

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem


Mimicking space-evenly with space-between: and :pseudos

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem




space-around

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem


space-between

  
1 lorem
  
2 lorem
  
3 lorem
  
4 lorem
  
5 lorem