title: Can I have a line between rows of flexbox?
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>Please view the snippet full page, there is a display problem when it's viewed within the post. Or use <a href="http://jsfiddle.net/9gzcpraa/" rel="noreferrer">this fiddle</a>. You may have to make your browser window narrow to see the navigation in multi row. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; a, li.NavigationLi2 &gt; a:visited {
      color: #e6eeff;
      text-decoration: none;
      -ms-word-wrap: nowrap;
      word-wrap: nowrap;
  }
  
  li.selected-branch-root &gt; a, li.selected-branch-root &gt; a {
      color: #fff;
      text-decoration: none;
      -ms-word-wrap: nowrap;
      word-wrap: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  &lt;/header&gt;
  &lt;nav class="horizontal-nav"&gt;
      &lt;ul class="horizontal-nav"&gt;
                  &lt;li class="selected-branch-root"&gt;&lt;a href="/Search"&gt;Search&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="NavigationLi2"&gt;&lt;a href="/My%20models"&gt;My models&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="NavigationLi2"&gt;&lt;a href="/Account"&gt;Account&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="NavigationLi2"&gt;&lt;a href="/Management%20Tools"&gt;Management&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="NavigationLi2"&gt;&lt;a href="/Administration"&gt;Administration&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="NavigationLi2"&gt;&lt;a href="/Help"&gt;Help&lt;/a&gt;
                  &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/nav&gt; 
  &lt;section id="main"&gt;
  &lt;/section&gt;
  &lt;footer&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>