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

user_2781862 0
Viewed 29343

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.

safari css html
3 Answers
user_113291340

flex-grow should also solve your problem:

.parent {
  display: flex;
  .child {
    flex: 1
  }
}

Thus, all children share the container space evenly as they have the same flex-grow value.

user_92177350
Related