如何在Safari上使CSS的justify-content：space-even平均回退到space-between？

问题描述

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

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;
}

以上代码可在Firefox，Chrome，IE11，Edge上正常运行，但无法运行Safari。

Above code works correctly on: Firefox,Chrome,IE11,Edge but fails on Safari.

Safari确实理解并识别 space-evenly 属性，但不执行任何操作，换句话说，结果是一样的： justify-content：initial;

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;

Safari官方不支持 -webkit-justify-content ，所以我想我会砍刀并尝试这样的备用：

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;
    }

但是Safari仍然能够理解它，并且呈现出类似于初始。
同样在iOS上发生...。这使我的网站设计崩溃了。

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.

谢谢。

推荐答案

@supports 没有帮助，请参阅上面的评论（嘿，苹果，您能提醒我这是什么意思吗？功能）（叹气），但您可以使用：pseudo s和之间的空格使用相同的布局。

唯一的限制是，您不能在flex容器上使用伪东西。

@supports is 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.

➡️

➡️ Codepen

➡️相关代码：

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

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

有5个项目，平均有6个空格宽度为均匀和4间隔为 （一半+ 4 +一半为 space-around ）。

通过在flex容器上创建2个：pseudos，并在Flexbox的强大功能下将它们视为flex项目，并使用空格之间现在有5 + 2 = 7个项，因此有6个同样宽的空格，问题已解决。

With 5 items, there are 6 "spaces" equally wide with space-evenly and 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-between there are now 5+2 = 7 items thus 6 equally wide "spaces", problem solved.

➡️完整代码段：

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

这篇关于如何在Safari上使CSS的justify-content：space-even平均回退到space-between？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！