如何在 Safari 上让 CSS justify-content:space-evenly 回退到 space-between？

Question

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

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

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

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

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

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

但 Safari 还是能理解它，它会像 initial 一样呈现它。 iOS 上也是如此，这让我的网站设计分崩离析。

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

Answer 1

flex-grow 也应该能解决你的问题：

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

因此，所有子节点均分容器空间，因为它们具有相同的 flex-grow 值。

Answer 2

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

justify-content property in ie

Answer 3

@supports 没有帮助，请参阅我上面的评论（嘿，Apple，你能提醒我这个功能的意义何在？叹息）但你可以使用 :pseudos 和 space-between 进行相同的布局。
唯一的限制是你不能在 flex 容器上使用伪类来做其他事情。

➡️ Codepen

➡️相关代码：

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

  &:before,
  &:after {
    content: '';
    display: block;
  }
}

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

➡️完成sn-p：

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