I am utilizing CSS flexbox to arrange a variable number of items in rows, wrapping around to additional rows as necessary.
My query is, can a horizontal line be inserted between each of the rows?
Here you can find a basic example of what I am working on. If you check out the codepen, you'll notice the items wrapping into two lines (although it could be more or less, depending on the number of elements and the display width). It is my desire to have a horizontal line separating 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>
Using the following CSS:
div {
border: 1px solid black;
width:20%;
display: flex;
flex-flow: row wrap;
}
span {
border: 1px solid blue;
margin: 5px;
}