在最后一行左对齐和垂直对齐的对齐和包装固定宽度的容器？

Question

我希望有多个 div，它们都具有相同的宽度和高度，并且每个边都有一个边距，覆盖了某个容器的整个宽度，并且它们之间的空间相等。当容器宽度变窄到不能保留 div 宽度（包括它们的边距）时，div 应该折叠起来。每行外边缘的 div 应与整个容器宽度齐平。我确实知道元素的确切数量。

Flexbox 与flex-wrap: wrap 和justify-content: space-between 一起很好地做到了这一点，但我不喜欢的是，当行换行时，我最初会得到一个包含位于行两侧的 2 个 div 的行。然后当第三个 div 包装时，它将是死点。我知道这是我对space-between 的要求，但我真正想要的是包装行为将底行上的 div 与上面的对齐 div 左对齐和垂直对齐。

我知道this solution here，它工作得很好，但我想不出一种方法来防止不使用媒体查询的容器底部的可变间距。间距的高度取决于容器/屏幕的宽度，我需要它保持一致。

这不一定要通过 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>