Add horizontal line separator for wrapping line items

Question

I use css flexbox to place an unknown number of elements in rows, wrapping extra lines if necessary.

My question is: is it possible to have a horizontal line between each line?

Here is a simple example of what I have. If you open the encoder, you will see that the elements are wrapped in two lines (this can be more than two or only one - it depends on the exact number of elements and the width of the screen). I would like to have a horizontal line between the lines.

<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 under each line using the flex-grow property. However, if you want to keep exactly 5 pixels between each element, I don’t know how to do it. If not, here is how you do it:

• Wrap each span in a div with the same class.
• Give your flexbox container a unique class / ID so that its CSS does not apply to div wrappers. Also remove its bottom border.
• Give your wrapper class the bottom border you want, some addition and set flex-grow: 1.
• Give the last flexible element an identifier with flexible growth: 1000 or some other arbitrarily large number.

Here is the jfiddle of this work.

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 line being evenly distributed, you can ignore the part about adding an identifier to the last item with a large flex-grow number.