space-evenly (justify-content) не работает на Chrome mobile

У меня проблема с space-evenly стоимостью для justify-content на Chrome mobile (он отлично работает на рабочем столе и на мобильном телефоне Firefox).

Мне удалось создать минимальный пример: Пример

У меня есть гибкий контейнер в направлении строки, и я хочу, чтобы элементы были равномерно распределены, как это было предусмотрено при использовании space-evenly. Он работает на рабочем столе, но на Chrome mobile (версия 59 на Android) элементы выравниваются слева. Вот сравнение двух: Сравнение

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

Заранее спасибо!

Ответ 1

Еще нет решения для многострочного/упакованного space-evenly для браузеров, которые его не поддерживают.

При использовании flex-wrap: wrap вам нужно будет установить фиксированное заполнение на контейнере гибкого диска, маржу на элементах или использовать скрипт.

Если можно обернуть каждую строку, вы можете использовать псевдоэлементы в сочетании с 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>

Ответ 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>