尝试使用 flexbox 创建 16x16 网格，但由于某种原因 width: 100% 不起作用
Posted
技术标签:
【中文标题】尝试使用 flexbox 创建 16x16 网格，但由于某种原因 width: 100% 不起作用【英文标题】：Trying to create 16x16 grid with flexbox but for some reason width: 100% won't work 【发布时间】：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)
【参考方案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>【讨论】：
为什么在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。以上是关于尝试使用 flexbox 创建 16x16 网格，但由于某种原因 width: 100% 不起作用的主要内容，如果未能解决你的问题，请参考以下文章