Выровнять по ширине и обернуть контейнеры фиксированной ширины по левому краю и по вертикали в последней строке?

Question

Я хотел бы иметь несколько блоков div, все с одинаковой шириной и высотой, и с полями по обе стороны от каждого, покрывающих всю ширину некоторого контейнера с равным промежутком между ними. Разделы div должны завершаться, когда ширина контейнера сужается настолько, что ширина div не может быть сохранена (включая их поля). Блоки div на внешних краях каждой строки должны соответствовать ширине sh контейнера. Я знаю точное количество элементов.

Flexbox прекрасно справляется с этим с flex-wrap: wrap и justify-content: space-between, но мне не нравится то, что когда строка переносится, я сначала получаю строку, содержащую 2 блока по обе стороны от ряда. Затем, когда третий div завершится, он будет мертвой точкой. Я понимаю, что это то, о чем я просил с space-between, но мне бы очень хотелось, чтобы поведение обертывания укладывалось в нижнюю строку с выравниванием по левому краю и по вертикали с выравниванием по ширине выше.

Я знаю об этом решении здесь , которое отлично работает, но я не могу придумать способ предотвратить переменный интервал в нижней части контейнера без использования медиа-запросов. Расстояние может меняться по высоте в зависимости от ширины контейнера / экрана, и мне нужно, чтобы он был согласованным.

Это не обязательно должно выполняться с помощью flexbox. Я открыт для других решений, но я должен поддерживать IE10 + (и, предпочтительно, IE9, который, как я знаю, исключает использование flexbox). Например, я как бы ищу преимущества обеих этих строк в этом примере:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.wrap-1 {
  justify-content: space-between;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
.wrap-1 li {
  background: tomato;
}
.wrap-2 li {
  background: gold;
}

.flex-item {
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<ul class="flex-container wrap wrap-1">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>

<ul class="flex-container wrap wrap-2">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>

Answer 1

В конце концов, я выбрал одно из решений, указанных в сообщении, предоставленном @TemaniAfif, но с некоторыми изменениями для обработки фиксированной ширины моих элементов и полей вокруг каждого.

Я знаю, что это решение использует фиктивные элементы в HTML, что считается плохой практикой, но мне удобнее использовать это, чем некоторые другие хаки. Просто помните, что если вы сами используете подобное решение для аналогичной проблемы, то минимальное количество фиктивных элементов, которое у вас должно быть, равно вашему количеству отображаемых элементов минус один, т.е. если нижняя строка имеет только один элемент, тогда ВСЕ фиктивные элементы потребуется для заполнения оставшейся части строки.

.tiles-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tile {
  width: 150px;
  margin-left: 10px;
  margin-right: 10px;
}

.tile-wrap {
  height: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: deeppink;
}

.tile-blind {
    height: 0;
}

<div class="tiles-container">
    <div class="tile tile-wrap">a</div>
    <div class="tile tile-wrap">b</div>
    <div class="tile tile-wrap">c</div>
    <div class="tile tile-wrap">d</div>
    <div class="tile tile-wrap">e</div>
    <div class="tile tile-wrap">f</div>
    <div class="tile tile-wrap">g</div>
    <div class="tile tile-wrap">h</div>
    <div class="tile tile-wrap">i</div>
    <div class="tile tile-wrap">j</div>
    <div class="tile tile-wrap">k</div>
    <div class="tile tile-wrap">l</div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
    <div class="tile tile-blind"></div>
  </div>