Display Flex 不适用于 Javascript 创建的 Div [关闭]答案

【问题标题】：Display Flex not working with Divs created by Javascript [closed]Display Flex 不适用于 Javascript 创建的 Div [关闭]
【发布时间】：2022-01-11 22:26:37
【问题描述】：

我正在用 Javascript 制作一个 16 x 16 的方形网格，并且有两个用于为网格创建 div 的 for 循环。我将每一行指定为一个弹性容器，并将其中的单元格指定为弹性框。不是 div 显示为网格，而是显示为一堆单元格，一个在另一个之下。此外，边框也没有正确显示 - 所以我尝试添加一个名为 rows 的新类以显示它们，但这不起作用。有人对为什么这不起作用有任何建议吗？

let board = document.getElementById("board");
let row;
let column;

for (let j = 0; j < 16; j++) {
  row = document.createElement("div");
  row.className = "flex-container";
  row.innerHTML = '';
  board.appendChild(row);

  for (let i = 0; i < 16; i++) {
    column = document.createElement("div");
    column.className = 'flexBoxes';
    column.classList.add = "rows";
    column.innerHTML = 'a';
    row.appendChild(column);

  }
}

flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

rows {
  background-color: pink;
  border-color: black;
  border-style: solid;
  border-width: 2px;
}

flexBoxes {
  flex: 1;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  max-width: 20px;
  clear: both;
}

&lt;div id="board"&gt;&lt;/div&gt;

【问题讨论】：

投票关闭，因为正如其他人指出的那样，这是一个小错字。你错过了.。

标签： javascript html css flexbox

【解决方案1】：

您的 CSS 类在开头缺少 .：

let board = document.getElementById("board");
let row;
let column;

for (let j = 0; j < 16; j++) {
  row = document.createElement("div");
  row.className = "flex-container";
  row.innerHTML = '';
  board.appendChild(row);

  for (let i = 0; i < 16; i++) {
    column = document.createElement("div");
    column.className = 'flexBoxes';
    column.classList.add = "rows";
    column.innerHTML = 'a';
    row.appendChild(column);

  }
}

.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.rows {
  background-color: pink;
  border-color: black;
  border-style: solid;
  border-width: 2px;
}

.flexBoxes {
  flex: 1;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  max-width: 20px;
  clear: both;
}

&lt;div id="board"&gt;&lt;/div&gt;

Class selectors - CSS: Cascading Style Sheets | MDN

【讨论】：