Justified and wrapping fixed-width containers left-aligned and vertically-aligned on last row?

Question

I would like to have a number of divs, all with equal width and height and a margin on either side of each, covering the full width of some container with equal space between. The divs should wrap down when the container width narrows enough that the div widths cannot be preserved (including their margins). The divs at the outer edges of each row should be flush with the full container width. I do know the exact number of elements.

Flexbox does this nicely with flex-wrap: wrap and justify-content: space-between, but what I don't like is that when the row wraps, I initially end up with a row containing 2 divs positioned at either side of the row. Then when the third div wraps it will be dead center. I understand this is what I've asked for with space-between, but what I would really like is for the wrapping behavior to stack the divs on the bottom row left-aligned and vertically aligned with the justified divs above.

I'm aware of this solution here, which works great but I can't figure out a way to prevent the variable spacing at the bottom of the container without using media queries. The spacing is of variable height depending on the width of the container/screen, and I need it to be consistent.

This doesn't have to be accommplished with flexbox. I'm open to other solutions but I have to support IE10+ (and preferably IE9 also, which I know precludes flexbox). For example, I'm sort of looking for the benefits of both of these rows in this example:

.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

In the end I went with one of the solutions linked in the post provided by @TemaniAfif but with some modifications to handle the fixed width of my elements and margin around each.

I know that this solution uses dummy elements in the HTML which is considered bad practice but I'm more comfortable using this than some of the other hacks. Just remember that if you do use a solution like this yourself for a similar issue, then the minimum number of dummy elements you should have is your number of displayable elements minus one i.e. if the bottom row has only one element, then ALL the dummy elements will be needed to fill the rest of the row.

.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>