CSSフレックスボックスの交互の行の色

Question

テーブルを使用するときは、n番目の子セレクタ（https://stackoverflow.com/a/3084318/1385857）を使用してテーブル行の色を簡単に変更できます。フレックスボックスレイアウトを使用する場合、これに匹敵する方法がありますか？私は（https://philipwalton.github.io/solved-by-flexbox/demos/grids/から）下記た：

<div class="Grid"> 
    <div class="Grid-cell"></div> 
    [more divs] 
    <div class="Grid-cell"></div> 
</div> 

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

.Grid-cell 
{ 
    flex: 1; 
} 

は、このシナリオでは、行の色を交互にすることが可能です。明確にするために、実際の行はなく、折り返しによってフレックスボックスによって作成された仮想行だけがあります。

Answer 1

nth-child（2n + 1、偶数、奇数）など、同じ技術を使用することができます。

要素の表示はここで干渉しません。

.Grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.Grid-row { 
 
    flex: 1; 
 
} 
 
.Grid-cell:nth-child(2n+1) { 
 
    background: pink; 
 
}

<div class="Grid"> 
 
    <div class="Grid-row"> 
 
    <div class="Grid-cell">Grid-cell 1</div> 
 
    <div class="Grid-cell">Grid-cell 2</div> 
 
    <div class="Grid-cell">Grid-cell 3</div> 
 
    <div class="Grid-cell">Grid-cell 4</div> 
 
    <div class="Grid-cell">Grid-cell 5</div> 
 
    <div class="Grid-cell">Grid-cell 6</div> 
 
    <div class="Grid-cell">Grid-cell 7</div> 
 
    </div> 
 
    <div class="Grid-row"> 
 
    <div class="Grid-cell">Grid-cell 1</div> 
 
    <div class="Grid-cell">Grid-cell 2</div> 
 
    <div class="Grid-cell">Grid-cell 3</div> 
 
    <div class="Grid-cell">Grid-cell 4</div> 
 
    <div class="Grid-cell">Grid-cell 5</div> 
 
    <div class="Grid-cell">Grid-cell 6</div> 
 
    <div class="Grid-cell">Grid-cell 7</div> 
 
    </div> 
 
</div>