如何使用flexbox创建动态方块？

Question

我在设置我正在做的草图项目的动态部分时遇到一些困难。接下来我要实现的想法是，预定容器内的正方形 (div) 数量会发生变化，并且盒子会更改大小以始终填充容器。会发生的情况是，如果盒子数量超过 256 个，它们就会溢出到底部，如果不够，它们就不会填满容器的额外空间。

codepen 链接 - https://codepen.io/kcolrehs/pen/eYKZXoa

CSS

  *,
  *:before,
  *:after {
    box-sizing: border-box;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    width: 250px;
    height: 250px;
  }

  .grid {
    border: 0.1px solid black;
    width: 15.63px;
    height: 15.63px;
}

Javascript：

for (let i = 0; i < 256; i++) {
    const grid = document.createElement('div');
    grid.classList.add('grid');
    container.appendChild(grid);
}

问题是：如何设计盒子的样式，使其根据父容器内的数量自动更改大小？

例如：

• 用户输入 64x64，网格会更改以匹配用户输入。
• 用户输入 4x4，网格会更改以匹配用户输入。
• 容器本身大小相同。

我尝试过使用各种弯曲增长和收缩属性，但除了使正方形变形之外，它没有真正做任何事情。

我尝试过不使用方形 div 的预定高度和宽度，而是使用 margint top 和匹配宽度，但效果不佳。

现在我正在考虑切换到网格布局并重新工作我的java以生成列和水平正方形并制作这样的网格，但在我这样做之前我在想也许有一个我没有想到的解决方案在这里。

Answer 1

感谢@Rory McCrossan 让我走上了正确的方向：

slider.addEventListener('change', function () {
    let boxes = document.querySelectorAll('.grid');
    boxes.forEach(box => {
        box.remove();//removes old grid
    });
    createGrid() //makes new grid afte reset
})


function createGrid() {
    for (let i = 0; i < (slider.value * slider.value); i++) {
        const grid = document.createElement('div');
        let a = slider.value;
        const boxSize = 250 / a; // creates the dynamic squeres
        grid.classList.add('grid');
        grid.style.width = boxSize + 'px';
        grid.style.height = boxSize + 'px';
        container.appendChild(grid);
    }
}
 

我会发布此内容，以防有一天同一个人遇到类似的问题