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

Question

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

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

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

这不必通过 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>

标签： htmlcss

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>