How to make CSS justify-content: spatially uniform disconnect to space between Safari?

Question

I am creating a web page and running a test against different browsers, one of the projects includes flexbox and space-uniformly, I know that this is not yet widely supported, since I use the space between for example:

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

The code works correctly: Firefox, Chrome, IE11, Edge, but does not work in Safari.

Safari understands and recognizes the space-evenly , but does nothing with it, in other words, the result is the same: justify-content:initial;

Officially, Safari does not support -webkit-justify-content , so I thought I would be cleaver and try a reserve like this:

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

But again, Safari understands this, and it does it the same way as initial . The same thing happens on iOS .... which makes my website design fall apart ...

Aesthetically, the space evenly looks better, so I’ll really use it in browsers that support this, so I don’t want to miss it because of Apple .... on the other hand, Apple users have a significant part of visitors, so I can’t ignore the problem and leave the rendering page with initial .

Thanks.

Answer 1

@supports won't help, see my comment above (hey Apple, can you remind me what is the point of this feature? Sigh), but you can have the same layout with :pseudo and space-between . <n> The only limitation is that you cannot use aliases in the flex container for anything else.

➡️ Codepen

➡️ Corresponding code:

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

With 5 elements, there are 6 "spaces" equally wide with space-evenly and 4 with space-between (and half + 4 + half with space-around ).
Having created 2: pseudos on the flex container and considering that they are considered flexible elements in terms of Flexbox power, with space-between there are now 5 + 2 = 7 elements, thus 6 equally wide “spaces”, the problem is solved.

➡️ Full fragment:

 /* /!\ 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>