Question

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

.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

@supports没有任何帮助，请参阅上面的评论（嘿，Apple，你能提醒我这个功能有什么意义吗？叹气）但是你可以和:pseudo和space-between。
唯一的限制是你不能在flex容器上使用pseudos来做任何事情。

➡️ Codepen

➡️相关代码：

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

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

有5个项目，有6个＆＃34;空格＆＃34;同等宽度的space-evenly和4 space-between（半+ 4 +一半space-around）。
通过在Flex容器上创建2：pseudos并给予他们灵活的Flexbox功能，space-between现在有5 + 2 = 7个项目，因此6个等宽＃34;空格＆＃ 34;，问题解决了。

➡️完整片段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

justify-content property in ie

Answer 3

flex-grow 也应该可以解决您的问题：

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

因此，所有子项均等地共享容器空间，因为它们具有相同的 flex-grow 值。

如何使CSS证明内容：在Safari上空间均匀地回退到空格？

3 个答案: