使用flexbox创建8x8棋盘

Question

我有一个问题，颜色正确的棋盘项目。我希望在每个奇数行的开头都有一个白色方块，但我很难用CSS做到这一点。此外，我还必须使用flexbox实现这一点。

这是我的助手：https://codepen.io/diana-larussa/pen/OJRqwpy

我试着那样做，但它不起作用。

        .container:nth-child(2n+1) .box:nth-child(2n) {
            background-color: black;
        }

This also doesn't work how I want it to:

     div:nth-child(even) {
         background-color: black;
     }
     
     div:nth-child(odd){
         background-color: white;
     }

Answer 1

它可以在我的设备上工作。但我认为使用class会更好。

​

* {
      margin: 0;
      padding: 0;
  }

  body {
      display: flex;
      height: 100vh;
      background-color: hotpink;
      justify-content: center;
      align-items: center;
  }

  .container {
      display: flex;
      flex-wrap: wrap;
      width: 45vw;
      height: 45vw;
  }

  div {
      flex-basis: 12.5%;
      height: 12.5%;
  }
.box{
  background-color:#fff
}

.box:nth-child(-2n+8), 
.box:nth-child(8) ~ div:nth-child(-2n+15), 
.box:nth-child(16) ~ div:nth-child(-2n+24),
.box:nth-child(24) ~ div:nth-child(-2n+31),
.box:nth-child(32) ~ div:nth-child(-2n+40),
.box:nth-child(40) ~ div:nth-child(-2n+47),
.box:nth-child(48) ~ div:nth-child(-2n+56),
.box:nth-child(56) ~ div:nth-child(-2n+63) {
background-color: #000;
}

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

​

Answer 2

这是使用类的示例

​

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    height: 100vh;
    background-color: hotpink;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 45vw;
    height: 45vw;
}

div {
    flex-basis: 12.5%;
    height: 12.5%;
}

.black {

    background-color: #000;

}
.white {

    background-color: #fff;
 
}

 <main class="container">
   <!-- 1st -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 2nd -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <!-- 3th -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 4st -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <!-- 5th -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 6th -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <!-- 7th -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 8th -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    </div>
 </main>

​