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

Question

我正在尝试使用 flexbox 创建一个 16x16 的网格。我已将每第 17 个元素的宽度属性设置为 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>

Answer 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;
}

<div class="container"></div>

Answer 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 创建 16x16 网格但由于某些原因 width: 100% 不起作用

Trying to create 16x16 grid with flexbox but for some reason width: 100% won't work

html

css

grid

flexbox