在最后一行左對齊和垂直對齊的對齊和包裝固定寬度的容器？

Question

我想要一些 div，所有的寬度和高度都相等，每個邊都有一個邊距，覆蓋了某個容器的整個寬度，它們之間的空間相等。 當容器寬度變窄到不能保留 div 寬度（包括它們的邊距）時，div 應該折疊起來。 每行外邊緣的 div 應與整個容器寬度齊平。 我確實知道元素的確切數量。

Flexbox 使用flex-wrap: wrap和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>

Answer 1

最后，我使用了@TemaniAfif 提供的帖子中鏈接的解決方案之一，但進行了一些修改以處理我的元素的固定寬度和每個元素的邊距。

我知道這個解決方案在 HTML 中使用了虛擬元素，這被認為是不好的做法，但我比其他一些黑客更喜歡使用它。 請記住，如果您自己使用這樣的解決方案來解決類似的問題，那么您應該擁有的虛擬元素的最小數量是您的可顯示元素的數量減一，即如果底行只有一個元素，那么所有虛擬元素將需要填充該行的 rest。

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