Can I have a line between rows of flexbox? - html

Question

I have a horizontal navigation, which is somewhat long, and needs to be rearranged for narrow displays. I used flexbox to make it reflow into multiple rows.
But with many rows, the division between the navigation items is not so obvious. I tried giving them a border on top, and it kinda works - but the border is, of course, only visible over the individual navigation options, not creating a nice dividing line between all flexbox rows.
Please view the snippet full page, there is a display problem when it's viewed within the post. Or use this fiddle. You may have to make your browser window narrow to see the navigation in multi row.
header {
height: 3em;
background-color: #fff;
}
#main {
height: 9em;
background-color: #5987d1;
}
footer {
height: 3em;
background-color: #a8a8a8;
border-top: 1px solid #0047b9;
}
ul.horizontal-nav {
background: rgba(72, 72, 72, 1);
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
list-style: none;
}
li.NavigationLi2, li.selected-branch-root {
padding: 0.75em 1em;
display: block;
border-top: 1px solid #2662c3;
}
li.selected-branch-root {
background: #2662c3;
}
li.NavigationLi2 > a, li.NavigationLi2 > a:visited {
color: #e6eeff;
text-decoration: none;
-ms-word-wrap: nowrap;
word-wrap: nowrap;
}
li.selected-branch-root > a, li.selected-branch-root > a {
color: #fff;
text-decoration: none;
-ms-word-wrap: nowrap;
word-wrap: nowrap;
}
<header>
</header>
<nav class="horizontal-nav">
<ul class="horizontal-nav">
<li class="selected-branch-root">Search
</li>
<li class="NavigationLi2">My models
</li>
<li class="NavigationLi2">Account
</li>
<li class="NavigationLi2">Management
</li>
<li class="NavigationLi2">Administration
</li>
<li class="NavigationLi2">Help
</li>
</ul>
</nav>
<section id="main">
</section>
<footer>
</footer>

Answer 1

Here is what I do lets say I have a flexbox container with 3 divs inside
<div class="flex">
<div>
<h2>Free Shipping</h2>
</div>
<div>
<h2>Everything In Stock</h2>
</div>
<div>
<h2>Largest Inventory</h2>
</div>
</div>
What I am playing with is in order to make a line right in the middle of the 3 div's / flex items simply just add another flex item between the divs like this:
<div class="flex">
<div>
<h2>Free Shipping</h2>
</div>
<img src="lib/xxx/img/ydivider.png" alt="divider"/>
<div>
<h2>Everything In Stock</h2>
</div>
<img src="lib/xxx/img/ydivider.png" alt="divider"/>
<div>
<h2>Largest Inventory</h2>
</div>
</div>
You can now see we have 5 flex items instead of 3. The 2 additional flex items I find are spaced correctly to be in the middle. Keep in mind if you go to to a breakpoint where you display as columns you will need a horizontal img at that point.

Answer 2

Assuming your philosophy allows you to: 1) Use flebox instead or ul for navigation; and 2) insert tags in your html specifically for aesthetic purposes, then I have a sugestion.
Create a wrapping div to your elements and add to it the CSS you'd like to span the row (background, border, padding...), and add to it the property flex: 1. You might also want to add to it min-width: fit-content (or max-content) to keep it from breaking lines.
I've added below the markup that would show it before and after the quick fix.
#flex-container {
display: flex;
flex-wrap: wrap;
}
#flex-container > div {
padding: 8px 24px;
border-bottom: 4px solid orange;
background: purple;
}
.flex-menu {
font-size: 13px;
font-family: sans;
color: white;
}
.fix {
flex: 1;
min-width: fit-content;
}
.force-break {
max-width: 340px;
}
<div class="force-break">
<h2>Plain</h2>
<div id='flex-container'>
<div class="flex-menu">Search</div>
<div class="flex-menu">My models</div>
<div class="flex-menu">Account</div>
<div class="flex-menu">Management</div>
<div class="flex-menu">Administration</div>
<div class="flex-menu">Help</div>
</div>
<h2>With fix</h2>
<div id='flex-container'>
<div class="fix"><div class="flex-menu">Search</div></div>
<div class="fix"><div class="flex-menu">My models</div></div>
<div class="fix"><div class="flex-menu">Account</div></div>
<div class="fix"><div class="flex-menu">Management</div></div>
<div class="fix"><div class="flex-menu">Administration</div></div>
<div class="fix"><div class="flex-menu">Help</div></div>
</div>
</div>