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

【问题标题】：How to create dynamic squares using flexbox?如何使用 flexbox 创建动态方块？
【发布时间】：2022-11-04 03:13:15
【问题描述】：

我在设置我正在做的草图项目的动态部分时遇到了一些困难。我接下来要实现的想法是正方形（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;
  }

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

问题是：我如何设置它们会根据父容器内的数量自动更改大小的框？例如：

用户输入 64x64 并且网格会更改以匹配用户输入。用户
输入 4x4 网格更改以匹配用户输入。
容器本身具有相同的大小。

我已经尝试过使用各种 flex 的增长和收缩属性，但除了使 squeres 变形之外，它并没有真正做任何事情。

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

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

【问题讨论】：

假设容器总是固定大小，那么解决方案就是box size = container width / number of boxes。如果我误解了您的要求，请编辑问题以包含清楚的描述正确的行为应该是什么。
使用 CSS Grid，您通常只需将网格中需要的项目添加到网格中，然后让网格根据您设置的 CSS 组织列和行。

标签： javascript css dynamic flexbox resize

【解决方案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);
    }
}

我会发布这个，以防有一天会有类似的问题

【讨论】：