CSS 用許多相同的孩子完全填充容器

Question

有沒有辦法用任意數量的正方形、相同大小的孩子（少至五個，多至 50 個）填充給定容器，以便孩子們：

1. 填充容器，盡可能少地留出垂直和水平空間； 和
2. 不要溢出容器？

例如，想象一盒 17 個圓形頭像，每個頭像都被放大，直到任何進一步的尺寸增加都會導致它們包裹並流過容器的底部。

我知道我可以使用 JS 來計算子項的最佳比例來填充容器，但我覺得flex或grid都內置了這個功能。

這與我得到的差不多：

 .container { border: 1px solid tomato; display: flex; flex-wrap: wrap; gap: 1vw; height: 100vh; justify-content: center; width: 100vw; } .container > div { background-color: coral; flex: 0 0 12%; margin: .5em; } .container .div::before { content: ''; display: block; padding-top: 100%; }

 <div class="container"> <!-- 32 children --> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> <div></div><div></div> </div>

如果這是重復的，請道歉。 在提問之前，我已經盡我最大的努力去尋求答案。

---

[編輯：添加細節]

這是所需的結果，顯示了一個固定大小的盒子和大小直到容器完全裝滿的項目。 如果盒子的大小與此不同，或者里面有不同數量的物品，這些物品會縮放，直到它們都適合里面而不會溢出。 最后兩個孤兒的對齊並不重要，但它們必須與其余項目的大小相同。

Answer 1

這是（某種程度上）可以通過 flex 實現的。 您可以使用justify-content上的space-evenly屬性確保每列之間的間隙space-evenly 。 但是，如果沒有 javascript，就不可能使行與列之間具有相同的間隙。 相反，您必須通過row-gap手動定義row-gap 。

 .flex-container { width: 300px; display: flex; flex-wrap: wrap; justify-content: space-evenly; row-gap: 8px; /* Issue on this line */ background-color: blue; } .flex-item { padding: 30px; background-color: red; }

 <div class="flex-container wrap"> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> <div class="flex-item">1</div> </div>

---

作為旁注，這在網格中絕對不可能，因為您不能在模板列中具有隱式大小定義。 也就是說，下將無法正常工作：

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))

Answer 2

似乎唯一的方法是使用 Javascript。

我最初想到使用CSS 表來執行此操作，但是您需要手動確定存在多少行，因此這不是一個選項。 但是如果你確實想這樣做，這個 JSFiddle會有所幫助。

此外，像@ThomasRyan 的回答一樣手動定義值（例如4em ）也無濟於事，因為您需要注意不同的容器大小（如果您想讓容器寬度為10px而不是100vw ）。

這里我們簡單地生成子計數，然后通過將容器寬度/高度除以子計數來獲得寬度和高度，將10px添加到 Mind margin。

 var container = document.querySelector('.container'); var childCount = random(5, 50); var childHeight = container.clientHeight / childCount + 10; var childWidth = container.clientWidth / childCount + 10; for (var i = 0; i < childCount; i++) { container.innerHTML += '<div style="height:' + childHeight + 'px;width:' + childWidth + 'px"></div>'; } function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }

 body { margin: 0; } .container { display: flex; flex-wrap: wrap; height: 100vh; width: 100vw; justify-content: center; align-items: center; } .container > div { background-color: coral; margin: 10px; }

 <div class="container"></div>

Answer 3

這是你想要的嗎

 .container { border: 1px solid tomato; display: flex; flex-wrap: wrap; gap: 1vw; height: 100vh; justify-content: center; width: 100vw; } .container > div { background-color: coral; flex: 0 0 4em; margin: .5em; } .container .div::before { content: ''; display: block; padding-top: 100%; }

 <div class="container"> <!-- 32 children --> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>