空间均匀(证明内容)无法在Chrome移动设备上运行

Question

我对Chrome移动设备的space-evenly价值存在问题justify-content(它在桌面和Firefox移动设备上运行正常).

我设法产生了一个最小的例子:例子

我有一个行方向的柔性容器,我希望元素在使用时按预期均匀分布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;
}

提前致谢!

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>