使用flexbox实现16x16网格时width:100%设置不生效如何解决

问题根因 #

• CSS选择器语法错误：nth-child 伪类的参数仅需一层括号，你写的 :nth-child((16n + 1)) 包含两层括号，浏览器无法识别该规则，样式完全不生效。
• 实现逻辑错误：你将作为网格单元的第1、17、33...个子元素设置为100%宽度，会导致这些网格单元本身占满整行，直接打乱16个单元每行的布局结构，这个强制换行的思路本身是错误的。

解决方案1（推荐：无需额外换行元素） #

直接利用flex自动换行特性，通过固定容器宽度实现16列布局，修改代码如下：

CSS修改 #

* {
  box-sizing: border-box;
  /* 清除默认边距避免布局偏移 */
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  /* 宽度刚好容纳16个25px宽的格子 */
  width: calc(16 * 25px);
}

/* 可以把格子的公共样式移到CSS里，避免行内样式冗余 */
.container>div {
  border: 1px solid black;
  height: 25px;
  /* 固定宽度不收缩 */
  flex: 0 0 25px;
}

JS修改（可选，移除重复的行内样式） #

const cdiv = document.querySelector('.container');
for (let i = 1; i < 257; i++) {
  const div = document.createElement('div');
  cdiv.appendChild(div);
}

解决方案2（保留强制换行思路） #

如果需要通过100%宽度元素实现换行，需要插入专门的换行占位元素，不要修改原有网格单元的宽度：

JS修改 #

const cdiv = document.querySelector('.container');
// 生成16行网格
for (let row = 0; row < 16; row++) {
  // 每行生成16个格子
  for (let col = 0; col < 16; col++) {
    const div = document.createElement('div');
    div.style.cssText = "border: 1px solid black; height: 25px; width: 25px";  
    cdiv.appendChild(div);
  }
  // 每行末尾插入换行占位元素
  const breakEl = document.createElement('div');
  breakEl.classList.add('line-break');
  cdiv.appendChild(breakEl);
}

CSS修改 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

/* 换行元素样式 */
.line-break {
  width: 100%;
  height: 0;
}

内容的提问来源于stack exchange，提问作者Röyal