flexbox - CSS flex box alternate row colors -

when using tables, easy alternate colors in table rows using nth child selectors (https://stackoverflow.com/a/3084318/1385857). there comparable way when using flexbox layout. have following (from 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; } 

is possible alternate row colors in scenario. clarify, there no real rows, virtual rows created flex box due wrapping.

you can use same technic nth-child (2n+1, even, odd), or whatever want.

the display of element doesn't interfere here.

.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>