使用嵌套for循环创建flexbox网格失败，寻求解决方案

核心问题分析 #

你的代码存在三个关键问题，导致嵌套循环仅生成1行1列，同时第一次单个循环的flex布局异常：

1. 重复复用同一DOM元素
   你在函数外部提前创建了row和col元素，循环中反复调用appendChild时，DOM规则不允许同一元素同时存在于多个位置，每次操作只会把元素从原位置移动到新位置，最终仅保留最后一次操作的结果（1行1列）。

2. 未声明循环变量
   i和j未用let/const声明，会成为全局变量，可能导致循环逻辑混乱，这也是第一次单个循环出现行列数偏差的潜在原因之一。

3. 事件绑定范围有限
   仅给初始创建的单个col绑定了mouseover事件，后续生成的新col不会触发变色效果。

第一次单个循环的布局异常补充 #

当你用单个循环生成input²个div时，flex换行异常的原因：

• 容器未设置flex-wrap: wrap，默认是nowrap，但col的border会额外占用宽度，16个col的总宽度（内容+border）超过容器的960px，导致强制换行，但border的额外尺寸计算偏差，出现15列、多行的情况；
• 固定尺寸的容器加上flex:1的col，border未被纳入元素尺寸计算，导致底部和右侧出现空隙。

修正后的完整代码 #

HTML（无需修改） #

<div id="heading">Etch-A-Sketch</div>
<div id="container"></div>

CSS（优化尺寸计算） #

body {
    background-color: burlywood;
}

#heading {
    font-size: 100px;
    font-weight: 900;
    color: brown;
    text-align: center;
    padding: 60px;
}

#container {
    background-color: white;
    height: 960px;
    width: 960px;
    margin: auto;
    display: flex;
    flex-direction: column; /* 让row垂直排列填满容器 */
}

.row {
    display: flex;
    flex: 1; /* 每行平分容器高度 */
}

.col {
    border: 1px solid black;
    box-sizing: border-box; /* 让border包含在元素尺寸内，避免额外占用空间 */
    flex: 1; /* 每列平分行宽度 */
}

JavaScript（修复循环与事件绑定） #

const containerEl = document.getElementById('container');

// 用事件委托绑定hover事件，更高效
containerEl.addEventListener('mouseover', function(e) {
    if (e.target.classList.contains('col')) {
        e.target.style.backgroundColor = 'black';
    }
});

function createGrid(input) {
    // 清空容器，避免重复生成网格
    containerEl.innerHTML = '';

    for (let i = 0; i < input; i++) {
        // 每次循环创建新的row元素
        const row = document.createElement('div');
        row.classList.add('row');
        containerEl.appendChild(row);

        for (let j = 0; j < input; j++) {
            // 每次循环创建新的col元素
            const col = document.createElement('div');
            col.classList.add('col');
            row.appendChild(col);
        }
    }
}

createGrid(16);

关键修正点说明 #

• 每次循环创建新的row和col，确保每个元素都是独立的DOM节点；
• 用let声明循环变量，避免全局变量污染；
• 给容器添加flex-direction: column，让row垂直分布填满容器高度；
• box-sizing: border-box确保border不会额外占用空间，解决尺寸溢出问题；
• 采用事件委托绑定mouseover事件，只需一次绑定即可作用于所有现有和未来的col元素，性能更优；
• 添加容器清空逻辑，方便后续扩展调整网格大小的功能。

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