我在 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;
}
提前致谢!
最佳答案
对于不支持它的浏览器,还没有针对多行/包装的 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>
关于html - 空间均匀(对齐内容)不适用于 Chrome 移动版,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45612955/