Question

我正在尝试制作8by8棋盘：https://codepen.io/sammyslamma/pen/gJeOwY

  
    .flex-container {
      display: flex;
      flex-flow: row;
      flex-wrap: wrap;
      height: 336px;
      width: 336px;
    }
    
    .chessboard {
      border: 1px solid black;
      width: 40px;
      height: 40px;
    }
    
    .chessboard div:nth-child(odd) {
      background-color: blue;
    }

    <div class="flex-container">
      <div id="tile">
        <script>
        for(x=0; x<64;x++) {
          var tile = document.createElement('div');
          tile.className = "chessboard";
          document.getElementById('tile').appendChild(tile);}
        </script>
      </div>
    </div>

我在类名“ chessboard”下创建了64个div。如何使正方形相交以形成8 x 8？我也尝试将高度和宽度以及柔韧性基准设置为12.5％。

谢谢您的帮助！

Answer 1

您的示例中有几个关键错误：

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

为您的着色，选择器.chessboard div:nth-child(odd)选择内部的奇数子格 .chessboard，而不是棋盘元素本身。

也就是说，如果出于以下几个原因，您实际上不想制作一个真正的国际象棋棋盘，我都不认为这两个都是您想要的：

国际象棋棋盘不是一个正方形的阵列，而是一个8x8的网格。 Flexbox会在适合的地方包装儿童，但您永远不需要连续7或9个正方形。
连续的“奇数”编号是不正确的，您希望在偶数行中使用奇数，而在奇数行中使用偶数。

人们建议使用CSS网格，这可以工作，但是HTML具有内置的2D网格结构，即很好的旧<table>元素！此处的示例：https://codepen.io/anon/pen/rgdNgq?editors=1111（我使用Haml来简化HTML的创建过程，而不是使用javascript，但否则只有8个<tr>，每个都有8个<td>）。

关键的CSS是：

.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 Grid也可以做到这一点，但是CSS网格的主要功能是可以更改网格，在这种情况下我们不希望这样做。

关于表结构的另一个好处是，您可以轻松解决每一行和每一列的问题，因为有一种将每一行分组的结构。对于未分组的单元格，您需要始终计算一个单元格的数量，这很容易，但这只是下一步。

Answer 2

只需将class =“ flex-item”放入内部div

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

Answer 3

使用您的代码，并使用grids而不是flexbox。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1px;
  max-width: 640px
}

.chessboard {
  border: 1px solid black;
  width: 80px;
  height: 80px;
  margin: 1px 
}

<div id="tile" class="container">
  <script>
   for(x=0; x<64;x++) {
     var tile = document.createElement('div');
     tile.className = "chessboard";
     document.getElementById('tile').appendChild(tile);}
   </script>
 </div>

为什么我的棋盘不使用flexbox呢？

3 个答案: