如何用CSS Flexbox创建固定尺寸容器内的n×n网格布局

核心问题分析 #

当前代码存在两个关键问题：

• justify-content: space-between会导致最后一行网格块自动分散，无法与上一行保持对齐
• 网格块的边框未被纳入尺寸计算逻辑，加上硬写容器固定像素值，容易引发整体溢出容器的情况

修复方案（Flexbox版本） #

以下是调整后的完整代码：

JavaScript 代码

const btn = document.createElement("button");
const body = document.querySelector("body");
body.appendChild(btn);
btn.className = "button";
btn.textContent = "button";

const container = document.createElement("div");
container.className = "container";
body.appendChild(container);

btn.addEventListener("click", () => {
  let select = Number(prompt("请输入数字: "));
  container.innerHTML = ""; // 清空现有网格块

  for (let i = 0; i < select * select; i++) {
    const div = document.createElement("div");
    div.className = "box";
    // 基于容器百分比计算尺寸，自动包含边框（依赖box-sizing: border-box）
    div.style.width = `calc(100% / ${select})`;
    div.style.height = `calc(100% / ${select})`;
    container.appendChild(div);
  }
});

CSS 代码

*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 800px;
  height: 700px;
  border: 3px solid black;
  display: flex;
  flex-wrap: wrap;
  /* 替换space-between为flex-start，保证每行网格块左对齐 */
  justify-content: flex-start;
  /* 避免多行时垂直方向出现多余间距 */
  align-content: flex-start;
}

.box {
  border: 1px solid black;
  /* 禁止网格块被压缩，确保尺寸准确 */
  flex-shrink: 0;
}

关键调整说明 #

• 使用calc(100% / ${select})替代硬写像素值，让网格块尺寸相对容器自动计算，同时box-sizing: border-box会将边框包含在尺寸内，不会额外占用空间导致溢出
• 移除justify-content: space-between，改用flex-start确保所有行网格块左对齐，解决最后一行分散问题
• 给网格块添加flex-shrink: 0，防止Flex布局自动压缩元素尺寸
• 容器添加align-content: flex-start，避免多行布局时垂直方向出现不必要的间距

更简洁的替代方案（CSS Grid版本） #

如果追求更简洁稳定的网格布局，推荐使用CSS Grid，无需手动计算每个网格块的尺寸：

CSS 代码（仅修改容器样式）

.container {
  width: 800px;
  height: 700px;
  border: 3px solid black;
  display: grid;
  /* 通过CSS变量动态生成n列，每列宽度均分 */
  grid-template-columns: repeat(var(--grid-size), 1fr);
  /* 通过CSS变量动态生成n行，每行高度均分 */
  grid-template-rows: repeat(var(--grid-size), 1fr);
}

.box {
  border: 1px solid black;
}

JavaScript 代码（对应修改）

btn.addEventListener("click", () => {
  let select = Number(prompt("请输入数字: "));
  container.innerHTML = "";
  // 设置控制网格行列数的CSS变量
  container.style.setProperty("--grid-size", select);

  for (let i = 0; i < select * select; i++) {
    const div = document.createElement("div");
    div.className = "box";
    container.appendChild(div);
  }
});

Grid版本由浏览器自动处理对齐和尺寸分配，逻辑更简洁，稳定性更高。

内容的提问来源于stack exchange，提问作者코딩마스터