如何用Flexbox实现适配固定容器的动态正方形网格？

Flexbox解决方案 #

要实现固定尺寸容器内，正方形数量变化时自动调整大小填满容器，Flexbox可以通过CSS变量+aspect-ratio属性配合JavaScript动态控制，或者直接通过JS计算每个正方形的尺寸。以下是两种可行方案：

方案1：CSS变量 + aspect-ratio（推荐） #

利用CSS变量定义每行的列数，结合aspect-ratio强制正方形比例，再通过flex属性让元素自动填充容器空间：

修改后的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;
  align-content: flex-start; /* 避免换行后出现垂直空隙 */
  --columns: 16; /* 默认列数，对应256个正方形 */
}

.grid {
  border: 0.1px solid black;
  flex: 1 0 calc(100% / var(--columns));
  aspect-ratio: 1 / 1; /* 强制保持正方形宽高比 */
}

配套JavaScript

通过JS动态设置容器的--columns变量，同时生成对应数量的正方形：

function generateGrid(gridSize) {
  const container = document.querySelector('.container');
  // 清空容器原有内容
  container.innerHTML = '';
  // 设置列数变量
  container.style.setProperty('--columns', gridSize);
  // 计算总正方形数量
  const totalItems = gridSize * gridSize;
  
  for (let i = 0; i < totalItems; i++) {
    const grid = document.createElement('div');
    grid.classList.add('grid');
    container.appendChild(grid);
  }
}

// 调用示例：生成4x4网格
generateGrid(4);
// 生成64x64网格
generateGrid(64);

方案2：JS直接计算正方形尺寸 #

如果需要兼容不支持aspect-ratio的旧浏览器，可以通过JS直接计算每个正方形的宽高：

修改后的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;
  align-content: flex-start;
}

.grid {
  border: 0.1px solid black;
  /* 移除固定宽高，由JS动态设置 */
}

配套JavaScript

function generateGrid(gridSize) {
  const container = document.querySelector('.container');
  container.innerHTML = '';
  const containerSize = 250; // 容器固定尺寸
  // 计算每个正方形的尺寸
  const itemSize = containerSize / gridSize;
  const totalItems = gridSize * gridSize;
  
  for (let i = 0; i < totalItems; i++) {
    const grid = document.createElement('div');
    grid.classList.add('grid');
    grid.style.width = `${itemSize}px`;
    grid.style.height = `${itemSize}px`;
    container.appendChild(grid);
  }
}

// 调用示例
generateGrid(4);
generateGrid(64);

为什么之前的尝试无效？ #

• 直接使用flex-grow/flex-shrink时，元素宽度会拉伸但高度不会自动同步，导致正方形变形；
• 预设固定宽高的方式无法适配数量变化，当数量超过/不足时，必然出现溢出或留白。

内容的提问来源于stack exchange，提问作者kcolrehs