zebra striping rows in a flex container with flex-wrap:wrap
<p>Let's say I'm using a flexbox container with <code>flex-direction:row</code> and <code>flex-wrap:wrap</code>.</p>

<p>Depending on the size of the browser window, I might have 2, 3, 4 or more items in each row.</p>

<p>I want to put a grey background in the items in every other row, mimicking a table layout. Is there an easy way to do this?</p>

<p>Example fiddle here: <a href="https://jsfiddle.net/mqf7nouc/1/" rel="nofollow">https://jsfiddle.net/mqf7nouc/1/</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="item"&gt;
    item 1
  &lt;/div&gt;
  &lt;div class="item"&gt;
    item 2
  &lt;/div&gt;
  &lt;div class="item"&gt;
    item 3
  &lt;/div&gt;
  &lt;div class="item"&gt;
    item 4
  &lt;/div&gt;
  &lt;div class="item"&gt;
    item 5
  &lt;/div&gt;
  &lt;div class="item"&gt;
    item 6
  &lt;/div&gt;
  &lt;div class="item"&gt;
    item 7
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.container {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

.item {
  height:50px;
  width:100px;
  text-align:center;
  vertical-align:middle;
  line-height:50px;
  border:1px solid black;
  margin:5px;
}
</code></pre>