title: Flexbox space between with line between rows
body: <p>This is a question I already have a solution to, but I'm wondering if there's a better way. What I want is to use flexbox to have rows of items with even space in between and a line between rows. The first and second example in the snippet below achieve this by using an <code>:after</code>, but I have to use a fair amount of CSS to hide it on the last row.</p>
  
  <pre><code>.item:nth-child(4n + 1):nth-last-child(4):after,
  .item:nth-child(4n + 1):nth-last-child(4):after,
  .item:nth-child(4n + 1):nth-last-child(2):after,
  .item:nth-child(4n + 1):nth-last-child(1):after{
    display: none;  
  }
  </code></pre>
  
  <p>Surely there is a better way (using flexbox) Does anyone know?</p>
  
  <p>I tried using a border on each item but obviously this has space between them which doesn't work and then I would still need to hide it using <code>:nth-last-child</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer{
    background-color: #ccc;
    margin-bottom: 15px;
  }
  
  .wrap{
    overflow: hidden;
    flex: 4;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 80%;
    margin: 0 auto;
    background-color: #cdcdcd;
    display: flex;
  }
  
  .item{
    width: 23%;
    padding-bottom: 30px;
    margin-bottom: 30px;
    position: relative;
  }
  .item2{
    width: 23%;
    padding-bottom: 30px;
    margin-bottom: 30px;
    position: relative;
    border-bottom: 1px solid red;
  }
  .item:nth-child(4n + 1):after{
    content: "";
    position: absolute;
    left: 0;
    width: 500%;
    bottom: 0;
    border-bottom: 1px solid red;
  }
  @media (max-width: 768px) {
    .item:nth-child(2n + 1):nth-last-child(2):after,
    .item:nth-child(2n + 1):nth-last-child(1):after{
      display: none;  
    }
    .item{
      width: 43%;
    }
  }
  @media (min-width: 768px) {
    .item:nth-child(4n + 1):nth-last-child(4):after,
    .item:nth-child(4n + 1):nth-last-child(4):after,
    .item:nth-child(4n + 1):nth-last-child(2):after,
    .item:nth-child(4n + 1):nth-last-child(1):after{
      display: none;  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;h3&gt;Working example - 8 Items&lt;/h3&gt;
    &lt;div class="wrap"&gt;
        &lt;div class="item"&gt;Item 1&lt;/div&gt;
        &lt;div class="item"&gt;Item 2&lt;/div&gt;
        &lt;div class="item"&gt;Item 3&lt;/div&gt;
        &lt;div class="item"&gt;Item 4&lt;/div&gt;
        &lt;div class="item"&gt;Item 5&lt;/div&gt;
        &lt;div class="item"&gt;Item 6&lt;/div&gt;
        &lt;div class="item"&gt;Item 7&lt;/div&gt;
        &lt;div class="item"&gt;Item 8&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="outer"&gt;
    &lt;h3&gt;Working example - 5 Items&lt;/h3&gt;
    &lt;div class="wrap"&gt;
        &lt;div class="item"&gt;Item 1&lt;/div&gt;
        &lt;div class="item"&gt;Item 2&lt;/div&gt;
        &lt;div class="item"&gt;Item 3&lt;/div&gt;
        &lt;div class="item"&gt;Item 4&lt;/div&gt;
        &lt;div class="item"&gt;Item 5&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="outer"&gt;
    &lt;h3&gt;Using normal border&lt;/h3&gt;
    &lt;div class="wrap"&gt;
        &lt;div class="item2"&gt;Item 1&lt;/div&gt;
        &lt;div class="item2"&gt;Item 2&lt;/div&gt;
        &lt;div class="item2"&gt;Item 3&lt;/div&gt;
        &lt;div class="item2"&gt;Item 4&lt;/div&gt;
        &lt;div class="item2"&gt;Item 5&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>