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

Question

我正在构建一个网页并针对不同的浏览器运行测试，其中一种设计涉及 flexbox 和 space-evenly，我知道这还没有得到广泛支持，所以作为后备我正在使用 space-between 像这样：

 .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 用户是访问者的重要组成部分，所以我不能忽视这个问题，让页面呈现 initial 外观。

原文由 Emil Borconi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@supports 没有帮助，请参阅我上面的评论（嘿苹果，你能提醒我这个功能的意义是什么吗？叹息）但你可以使用 :pseudo s 进行相同的布局和 space-between 。

唯一的限制是你不能在 flex 容器上使用 pseudos 做任何其他事情。

➡️ 代码笔

➡️相关代码：

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

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

有 5 个项目，有 6 个“空格”与 space-evenly 等宽，4 个与 space-between 等宽（和 half + 4 + half with space-around ）。

通过在 flex 容器上创建 2 个 :pseudos 并根据 Flexbox 的强大功能将它们视为 flex 项目，使用 space-between 现在有 5+2 = 7 个项目，因此有 6 个同样宽的“空格”，问题解决了.

➡️ 完整片段：

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

原文由 FelipeAls 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

ie 中的 justify-content 属性

原文由 Роман 发布，翻译遵循 CC BY-SA 4.0 许可协议