bugfix> css > 投稿

4列とn行のグリッドがあるとします。 1つおきの要素は、他の要素とは異なる色にする必要があります。やや基本パターン ただし、4列のみです。

display: flex を持つ1つの親でこれが必要ですその上。リンクされた例を適合させようとしましたが、動作させることができませんでした。

回答 1 件
  • これは非常に簡単です。パターンが4行の2行に渡って繰り返されるため、 8n + i にスタイルを適用するだけです。  市松模様の場合:

    .flex {
      display: flex;
      width: 400px;        /* width of four squares */
      flex-direction: row;
      flex-wrap: wrap;
    }
    .square {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      box-sizing: border-box;
    }
    .square:nth-child(8n+1),
    .square:nth-child(8n+3),
    .square:nth-child(8n+6),
    .square:nth-child(8n+8) {
        background:black;
    }
    .square:nth-child(8n+2),
    .square:nth-child(8n+4),
    .square:nth-child(8n+5),
    .square:nth-child(8n+7) {
        background:white;
    }
    
    
    <div class="flex">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
    
    

あなたの答え