问题描述
我对 Chrome 移动设备上 justify-content
的 space-evenly
值有问题(它在桌面和 Firefox 移动设备上运行良好).
我设法制作了一个最小的示例:示例
我有一个行方向的 flex 容器,我希望元素按使用 space-evenly
时的预期均匀间隔.它适用于桌面,但适用于 Chrome 移动设备(Android 版本 59),但是,元素在左侧对齐.下面是两者的比较:比较
center
和 space-around
值按预期工作,但是,但我真的想使用 space-evenly
或等效的(flex-wrap: wrap
行为对我来说也很重要).
这是我的 HTML:
<div class="元素"></div><div class="元素"></div><div class="元素"></div>
这是我的 CSS:
.container {显示:弹性;弹性方向:行;justify-content:空间均匀;flex-wrap: 包裹;背景:浅灰色;}.元素 {边距:8px;宽度:42px;高度:42px;背景:黑色;}
提前致谢!
对于不支持多行/环绕 space-evenly
的浏览器,尚无解决方案.
当使用 flex-wrap: wrap
时,你需要在 flex 容器上设置一个固定的内边距,在项目上设置边距或使用脚本.
如果可以包装每一行,您可以将伪元素与 space-between
结合使用,以获得与 space-evenly
给出的完全相同的结果.
在下面的示例中,space-between
将在计算间距时考虑 零宽度 伪元素,从而产生相同的结果.
.container {显示:弹性;弹性方向:行;对齐内容:间隔;/* flex-wrap: 包裹;*//* 对齐项目: flex-start;如果是img",这将阻止它拉伸 */背景:浅灰色;}.元素 {边距:8px;宽度:42px;高度:42px;背景:黑色;}.container::before,.container::after {内容: '';}
<div class="元素"></div><div class="元素"></div><div class="元素"></div>
I have an issue with the space-evenly
value for justify-content
on Chrome mobile (it works fine on Desktop and on Firefox mobile).
I managed to produce a minimal example: Example
I have a flex container in a row direction and I want the elements to be spaced evenly, as intended when using space-evenly
. It works on desktop, but on Chrome mobile (version 59 on Android), however, the elements are aligned on the left. Here is a comparison of the two: Comparison
center
and space-around
values work as intended, however, but I really want to use space-evenly
or an equivalent (the flex-wrap: wrap
behavior is also important to me).
Here is my HTML:
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
And here is my 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;
}
Thanks in advance!
There is no solution yet for multi-line/wrapped space-evenly
for browsers that doesn't support it.
When using flex-wrap: wrap
you will need to i.e. set a fixed padding on the flex container, margin on the items or use a script.
If it is possible to wrap each row you can use the pseudo elements in combination with space-between
to achieve the exact same result as space-evenly
give.
In below sample the space-between
will take the zero width pseudo elements into account when calculating the space between, hence producing the same result.
.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>
这篇关于空间均匀(对齐内容)不适用于 Chrome 移动设备的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!