html - 如何使 CSS 对齐内容 :space-evenly fallback to space-between on Safari?

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 而热衷于放弃它。另一方面，Apple 用户是访问者的重要组成部分，所以我不能忽视这个问题并让页面呈现初始外观。

Answer 1

@supports 没有帮助，请看我上面的评论(嘿 Apple，你能提醒我这个功能的意义是什么吗？叹息)但是你可以使用相同的布局 :pseudos 和 space-between.
唯一的限制是您不能将 flex 容器上的伪对象用于任何其他用途。

➡️ Codepen

➡️相关代码:

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

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

对于 5 个元素，有 6 个“空格”等宽 space-evenly 和 4 个 space-between (和 half + 4 + half 空格键).
通过在 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>