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>

抱歉，如果这是重复的。在提问之前，我已尽我最大的努力寻求答案。

---

[编辑：添加细节]

这是显示具有 FIXED 大小的框和项目大小直到容器完全装满的所需结果。如果盒子的大小与此不同，或者里面有不同数量的物品，则这些物品会缩放，直到它们都装在里面而不会溢出。最后两个孤儿的对齐方式并不重要，但它们必须与其余项目的大小相同。

Answer 1

这（在某种程度上）可以通过 flex 实现。您可以确保每列之间的间隙与justify-content 上的space-evenly 属性相同。但是，如果没有 javascript，就不可能使行之间的间距与列相同。相反，您必须通过 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>

---

附带说明，这绝对不可能在网格中执行，因为您不能在模板列中进行隐式大小定义。 IE。以下将不工作：

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

Answer 2

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

我起初想到使用CSS tables 来执行此操作，但您需要手动确定存在多少行，所以这不是一个选项。但如果您确实想这样做，this JSFiddle 会有所帮助。

另外，像@ThomasRyan's answer 那样手动定义值（例如4em）也无济于事，因为您需要注意不同的容器大小（如果您想使容器宽度10px 而不是@987654326 @)。

这里我们只是简单地生成子计数，然后通过将容器宽度/高度除以子计数得到宽度和高度，并在头脑边距中添加10px。

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>