title: Add a horizontal line separator on rows of wrapping items
body: <p>I'm using css flexbox to place an unknown number of items in rows, wrapping around to additional rows if needed.</p>
  
  <p>My question is, is it possible to have a horizontal line between each of the rows?</p>
  
  <p><a href="http://codepen.io/anon/pen/jbQpvP" rel="noreferrer">Here</a> is a simple example of what I have. If you open the codepen you will see the items wrap into two lines (it could be more than two; or only one - this depends on the exact number of elements and the width of the display). I would like to have a horizontal line between the rows.</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;First item&lt;/span&gt;
      &lt;span&gt;Second item&lt;/span&gt;
      &lt;span&gt;Third item&lt;/span&gt;
      &lt;span&gt;Fourth item&lt;/span&gt;
      &lt;span&gt;Fifth item&lt;/span&gt;
      &lt;span&gt;Sixth item&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the following CSS:</p>
  
  <pre><code>div {
    border: 1px solid black;
    width:20%;
    display: flex;
    flex-flow: row wrap;
  }
  
  span {
    border: 1px solid blue;
    margin: 5px;
  }
  </code></pre>