Add a horizontal line separator on rows of wrapping items

Question

I'm using css flexbox to place an unknown number of items in rows, wrapping around to additional rows if needed.

My question is, is it possible to have a horizontal line between each of the rows?

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

<div>
    <span>First item</span>
    <span>Second item</span>
    <span>Third item</span>
    <span>Fourth item</span>
    <span>Fifth item</span>
    <span>Sixth item</span>
</div>

With the following CSS:

div {
  border: 1px solid black;
  width:20%;
  display: flex;
  flex-flow: row wrap;
}

span {
  border: 1px solid blue;
  margin: 5px;
}

Answer 1

There is a way to add a horizontal line underneath each row using the "flex-grow" property. However, if you wanted to keep exactly 5px between each item - I don't know of a way to accomplish this. If not, here is how you would do it:

1. Wrap each span in a div with the same class.
2. Give your flexbox container a unique class/ID so its CSS is not applied to the wrapper divs. Also remove its bottom border.
3. Give your wrapper class the bottom-border that you want, some padding, and set flex-grow: 1.
4. Give the last flex-item an id with a flex-grow: 1000 or some other arbitrarily large number.

Here is a JFiddle of this working.

Here is the code I used:

<style>
div.flexbox {
 border-left: 1px solid black;
 border-top: 1px solid black;
 border-right: 1px solid black;
 width:50%;
 display: flex;
 flex-flow: row wrap;
 align-items: stretch;
}       
span {
 border: 1px solid blue;
 margin: 5px;
}      
.wrap {
 border-bottom: 1px solid black;
 padding: 5px;
 flex-grow: 1;
}
#last {
 flex-grow: 1000;
}
</style>
<div class="flexbox">
  <div class="wrap"><span>First item</span></div>
  <div class="wrap"><span>Second item</span></div>
  <div class="wrap"><span>Third item</span></div>
  <div class="wrap"><span>Fourth item</span></div>
  <div class="wrap"><span>Fifth item</span></div>
  <div class="wrap"><span>Sixth item</span></div>
  <div class="wrap"><span>Seventh item</span></div>
  <div class="wrap"><span>Eigth item</span></div>
  <div class="wrap"><span>Nineth item</span></div>
  <div class="wrap"><span>tenth item</span></div>
  <div id="last" class="wrap"><span>Eleventh item</span></div>
</div>

If you don't mind the last row being evenly spaced, then you can ignore the part about adding an ID to the last element with a larger flex-grow number.