空间均匀(对齐内容)不适用于 Chrome 移动设备 [英] space-evenly (justify-content) not working on Chrome mobile

问题描述

我对 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 移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！