html - 空间均匀(对齐内容)不适用于 Chrome 移动版

Question

我在 Chrome 移动设备上 justify-content 的 space-evenly 值有问题(它在桌面和 Firefox 移动设备上工作正常)。

我设法生成了一个最小示例:Example

我有一个沿行方向的 flex 容器，我希望元素间隔均匀，正如使用 space-evenly 时的预期那样。它适用于桌面，但在 Chrome 移动版(Android 上的版本 59)上，元素在左侧对齐。这是两者的比较:Comparison

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

提前致谢!

Answer 1

对于不支持它的浏览器，还没有针对多行/包装的 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>