Html 如何使 CSS justify-content:space-evenly 回退到 Safari 上的 space-between？

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

提问by Emil Borconi

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:

我正在构建一个网页并针对不同的浏览器运行测试，其中一个设计涉及 flexbox 和均匀空间，我知道这还没有得到广泛支持，因此作为后备，我正在使用这样的空间：

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

以上代码在：Firefox、Chrome、IE11、Edge 上正常工作，但在 Safari 上失败。

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

Safari 确实理解并识别该space-evenly属性，但对它不做任何处理，换句话说，结果是一样的：justify-content:initial;

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

Safari 官方不支持，-webkit-justify-content所以我想我会更加努力并尝试回退：

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

但是 Safari 再次理解它并且它呈现它与initial. 同样的情况发生在 iOS 上......这让我的网站设计分崩离析......

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 initiallook.

从美学上讲，空间均匀看起来更好，所以我真的很喜欢在支持它的浏览器上利用它，所以我不想因为 Apple 而放弃它......另一方面，Apple 用户是重要的一部分的访问者，所以我不能忽视这个问题，让页面呈现initial外观。

Thank you.

谢谢你。

回答by FelipeAls

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

@supports没有帮助，请参阅我上面的评论（嘿Apple，你能提醒我这个功能的重点是什么吗？叹气）但你可以有相同的布局:pseudos 和space-between。
唯一的限制是你不能在 flex 容器上使用伪代码做其他事情。

?? 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-evenlyand 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-betweenthere are now 5+2 = 7 items thus 6 equally wide "spaces", problem solved.

有 5 个项目，有 6 个“空格”等宽，有space-evenly4 个space-between（和一半 + 4 + 一半space-around）。
通过在 flex 容器上创建 2 个 :pseudos 并考虑到它们被 Flexbox 的强大功能视为弹性项目，space-between现在有 5+2 = 7 个项目，因此 6 个同样宽的“空间”，问题解决了。

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

回答by Роман

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

justify-content property in ie

ie 中的 justify-content 属性