尝试使用 flexbox 创建 16x16 网格，但由于某种原因 width: 100% 不起作用答案

【问题标题】：Trying to create 16x16 grid with flexbox but for some reason width: 100% won't work尝试使用 flexbox 创建 16x16 网格，但由于某种原因 width: 100% 不起作用
【发布时间】：2021-12-24 20:02:56
【问题描述】：

我正在尝试使用 flexbox 创建一个 16x16 的网格。我已将每 17 个元素的 width 属性设置为 100%，并将 flex-wrap 设置为 wrap 以实现此目的。但是，由于某种原因，我的代码不起作用。我的页面上没有 16x16 网格。我该如何解决这个问题？

const cdiv = document.querySelector('.container');

// Add 16 divs
for (let i = 1; i < 257; i++) {
  const div = document.createElement('div');
  div.style.cssText = "border: 1px solid black; height: 25px; width: 25px";  
  cdiv.appendChild(div);
}

* {
  box-sizing: border-box;
}

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

.container>div:nth-child((16n + 1)) {
  width: 100% !important;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container"></div>
    <script src="script.js"></script>
  </body>
</html>

【问题讨论】：

什么不起作用？
我没有得到想要的 16x16 网格@Sfili_81
请使用 SO sn-p 添加一个工作示例，以便我们检查哪些不工作
@Sfili_81 什么是 SO sn-p 以及如何添加它？
检查.container>div:nth-child((16n + 1)) 是否错误。试试这个.container>div:nth-child(16n + 1)

标签： html css flexbox grid

【解决方案1】：

你的第 n 个孩子有错字（额外的括号） - 如果你删除它然后取消样式，你的第 17 个 div，你应该得到你的网格：

const cdiv = document.querySelector('.container');

// Add 16 divs
for (let i = 1; i < 257; i++) {
  const div = document.createElement('div');
  cdiv.appendChild(div);
}

* {
  box-sizing: border-box;
}

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

.container>div {
  border: 1px solid black;
  height: 25px;
  width: 25px;
}

.container>div:nth-child(16n + 1) {
  width: 100%;
  border: 0;
  height: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Etch-a-Sketch</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container"></div>
  <script src="script.js"></script>
</body>

</html>

你可以让js根据输入为你做这件事：

function createBoxes(numberPerRow) {
  const cdiv = document.querySelector('.container');
  const total = (numberPerRow * numberPerRow) + numberPerRow;
  const mod = numberPerRow + 1;

  for (let i = 1; i < total; i++) {
    const div = document.createElement('div');

    if (i % mod === 0) {
      div.style.cssText = "border: 0; height: 0; width: 100%";
    } else {
      div.style.cssText = "border: 1px solid black; height: 25px; width: 25px";
    }

    cdiv.appendChild(div);
  }
}

createBoxes(16);

* {
  box-sizing: border-box;
}

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

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：

为什么在container>div:nth-child(16n + 1) 中将border 和height 设置为0？
所以 div 不占用任何空间，只是作为将下一批推入新行的中断

【解决方案2】：

如果您不是绝对需要使用 flexbox，请使用网格。 Grid 非常适合这个应用：

const cdiv = document.querySelector('.container');

// Add 16 divs
for (let i = 1; i < 257; i++) {
  const div = document.createElement('div');
  div.style.cssText = "border: 1px solid black; height: 25px; width: 25px";  
  cdiv.appendChild(div);
}

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(16, 25px [col-start]);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container"></div>
    <script src="script.js"></script>
  </body>
</html>

【讨论】：

感谢您的回答，但我必须使用 flexbox。