空间均匀(对齐内容)在 Chrome 移动设备上不起作用

Question

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

提前感谢！

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>

Answer 2

更新这似乎仅适用于单行

您可以通过边距均匀地伪造空间，并最终伪造伪元素。

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

Answer 3

您可以尝试添加不同的值

flex-direction: