在Chrome移动版中，space-evenly（justify-content）无法正常工作

Question

在Chrome移动版中，space-evenly（justify-content）无法正常工作

htmlcssflexbox

12

我在Chrome移动版上使用justify-content的值为space-evenly时遇到了问题（在桌面和Firefox移动版上运行正常）。

我制作了一个最小化的示例：示例

我的flex容器的方向是横向排列，我想要元素均匀间距，就像使用space-evenly那样。它在桌面上可以工作，但是在Chrome移动版（Android上的59版本）上，元素被对齐到左侧。这里是两者的比较：比较

center和space-around的值可以按预期工作，但我真的想使用space-evenly或等效的值（flex-wrap:wrap的行为对我也很重要）。

这是我的HTML代码：

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

这是我的 CSS：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background: lightgrey;
}

.element {
  margin: 8px;
  width: 42px;
  height: 42px;
  background: black;
}

提前致谢！

- Maverick Chardet

尝试移除 flex-wrap。这样应该可以解决问题。 - Anmol Sandal

@AnmolSandal 我刚刚尝试了一下，问题仍然存在 :/ - Maverick Chardet

2

space-evenly与其他布局选项不同，在浏览器中的支持有限。它是最近才引入的，尚未在移动版Chrome中实现（事实上，大多数移动浏览器都不支持它）。它实际上是首先在网格中实现，然后再移植到flexbox中。当浏览器无法识别此值时，它会回退到flex-start，这就是您在移动版Chrome上看到的情况。 - Terry

1

你应该将最受支持的值放在最后，即先声明 space-evenly，然后再在其后添加回退选项。未被识别的 === 回退到默认值，即 flex-start。这并不意味着忽略规则。 - Terry

3

@Terry，你总是把_fallback_ 属性放在前面, 然后才是新的属性/值，所以在这种情况下把 space-evenly 放在前面是错误的，应该放在最后。 - Asons

显示剩余7条评论

3个回答

3

更新这似乎只是针对单行的一种解决方法

您可以通过边距和伪元素来模拟 space-evenly。

.container {
  display:flex;
}
.element,.container:before  {
  border:solid;
  margin:0 auto 0 0;
  padding:1em;
}
.container:before {
  content:'';
  border:none;
  padding:0;
}

<div class="container">
  <div class="element">11</div>
  <div class="element">2 </div>
  <div class="element">3333</div>
  <div class="element">444</div>
</div>

或者像@IlyaStreltsyn建议的那样使用nth-child:

甚至可以不用伪元素：.element:first-child { margin: 0 auto; }

- G-Cyrillus

1

甚至可以不使用伪元素：.element:first-child { margin: 0 auto; }。 - Ilya Streltsyn

@MaverickChardet，你能否提供一个示例来检查是否存在任何媒体查询、最小宽度或子元素数量或其他任何情况，以便通过CSS选择器进行一些过滤吗？ - G-Cyrillus

@GCyrillus，我不确定我理解你的问题，但实际情况将与我在第一篇帖子中给出的示例完全相同，只是元素将包含一个<h3>标题和一个<ul>列表。如果在一般情况下无法使用flex-wrap: wrap模拟space-evenly，那么是否更容易考虑始终存在3个元素（尽管它可能稍后会改变）？ - Maverick Chardet

理论上，可以通过将容器切换为 display:grid（使用 @supports）并给它 grid-template-columns:repeat(auto-fit,42px) 来解决这个问题。不幸的是，与 Flexbox 中的 space-evenly 有 bug 的相同版本的 Chrome 在 Grid 中也有一个 auto-fit 的 bug（它们会在右侧添加未使用的网格列）。所以我不认为这里有任何简单的解决方案，很遗憾。 - Ilya Streltsyn

有没有办法使用JS检测客户端浏览器的space-evenly实现是否存在问题？如果可以，我可以使用它来替代媒体查询... - Maverick Chardet

显示剩余6条评论

0

你可以尝试添加不同的值

flex-direction:

- prajwal tulawe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

目前尚无解决方案能够支持不支持多行/换行的浏览器使用space-evenly。使用flex-wrap: wrap时，您需要在flex容器上设置固定的填充、项目上的边距，或使用脚本等方式。

如果可以每一行都换行，您可以使用伪元素与space-between结合来达到与space-evenly相同的效果。

在下面的示例中，space-between将考虑零宽度的伪元素来计算间距，从而产生相同的结果。

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  /* align-items: flex-start;        if "img", this will prevent it from stretching  */
  background: lightgrey;
}

.element {
  margin: 8px;
  width: 42px;
  height: 42px;
  background: black;
}

.container::before,
.container::after {
  content: '';
}

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>