Javascript 为什么不是'；我的棋盘不是用flexbox包装的吗？

我正在尝试制作一个8by8棋盘：

.柔性容器{
显示器：flex；
柔性流：行；
柔性包装：包装；
高度：336px；
宽度：336px；
}
.棋盘{
边框：1px纯黑；
宽度：40px；
高度：40px；
}
.棋盘分区：第n个子（奇数）{
背景颜色：蓝色；
}

对于（x=0；x只需将class=“flex item”放在内部div中

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

使用您的代码，而不是flexbox


.container{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格间距：1px；
最大宽度：640像素
}
.棋盘{
边框：1px纯黑；
宽度：80px；
高度：80px；
保证金：1px
}

对于（x=0；x而言，您的示例中有几个关键错误：

display:flex
影响元素的直接子元素-在这种情况下，元素
#tile
充当子元素，而您的
。棋盘
元素不受影响

对于您的着色，选择器
.chessboard div:nth child（odd）
选择
.chessboard
内的奇数子div，而不是棋盘元素本身

也就是说，如果你真的想做一个象棋棋盘，我不认为这两个都是你想要的，原因有两个：

国际象棋棋盘不是一个正方形阵列，而是一个8x8的网格。Flexbox可以将孩子们包裹在任何适合他们的地方，但你永远不希望一行有7或9个正方形
连续“奇数”编号不正确，您需要偶数行中的奇数，奇数行中的偶数
人们建议使用CSS网格，这可能会起作用，但是HTML有一个内置的2D网格结构，这是一个很好的古老的
元素！这里的示例：（我使用Haml来简化HTML创建，而不是javascript，但是它只有8个
，每个都有8个
）

关键是：

.chess-board {
  border: 1px solid gray;
  border-collapse: collapse;
  border-spacing: 0;
}

.chess-board td {
  padding: 0;
  width: 4rem;
  height: 4rem;
}

.chess-board tr:nth-child(odd) td:nth-child(even),
.chess-board tr:nth-child(even) td:nth-child(odd){
  background: #222;
}

这对于一个真正的棋盘来说是很好的，因为你只能保证有8 x 8。当然CSS网格也可以做到，但是CSS网格的主要功能是网格可以改变，这在本例中是我们不希望的

表结构的另一个好处是，您可以轻松地处理每一行和每一列，因为每一行都有一个分组结构。对于未分组的单元格，您需要始终计算单元格的编号，这很简单，但只是另一个步骤。
检查一下：如果您能够描述您看到的问题，那就太好了同样在您的问题中。将flex属性应用于
#tile
而不是
。flex容器
。有关详细信息，请参阅副本。我不同意此问题是重复的-问题的标题由链接的答案解决，但基本问题是“如何制作8x8棋盘”我认为这是一个单独的问题。@Beejamin这里的问题不是如何创建棋盘，而是副本中解释的flexbox属性的未使用…每个用户都有不同的需求和不同的情况，但问题仍然是一样的：flexbox仅限于与父/子相关的，这使得它成为一个完美的副本。您理解这一点，你可以修改你的代码，你将有棋盘非常感谢你！这是非常有用的。