title: Remove margin-right when flex-wrap is wraping elements with pure CSS
body: <p>I've got a wrapper and some items within. I would like to place two items next to other in each row. I used <code>flexbox</code> to solve this. </p>
  
  <p>My wrapper has the property <code>flex-wrap: wrap;</code> and my items have the property: <code>flex: 0 0 45%;</code>. So every of my items use 50% of the row (included the margins). I use <code>margin</code> to make a gap on the right side and a gap on the bottom between the items. This works almost as I expected. </p>
  
  <p>Now my question: Is there a way to ignore the <code>margin-right</code> on the second item in each row (where it wraps), so the second item is also aligned to the right side of the wrapper same as the left item is. At the moment, there is also a gap at the end of the row because of the <code>margin-right</code>. I would like to remove this gap. Is this possible with pure <code>CSS</code>? <code>last-child</code> just removes the <code>margin-right</code> on the last item, but this is clear why. Is there a way to remove it on the end of the row, where the items wrap? Hope this is clear enough. </p>
  
  <p>Below my snippet:</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>.wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid black;
    width: 768px;
  }
  
  .wrapper__item {
    flex: 0 0 45%;
    width: 330px;
    height: 160px;
    margin: 0 36px 18px 0;
    background-color: lightcoral;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="wrapper__item"&gt;Item&lt;/div&gt;
    &lt;div class="wrapper__item"&gt;Item&lt;/div&gt;
    &lt;div class="wrapper__item"&gt;Item&lt;/div&gt;
    &lt;div class="wrapper__item"&gt;Item&lt;/div&gt;
    &lt;div class="wrapper__item"&gt;Item&lt;/div&gt;
    &lt;div class="wrapper__item"&gt;Item&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is also a screenshot where I would like to remove the margin-right (see arrows):</p>
  
  <p><a href="https://i.stack.imgur.com/JKGkP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JKGkP.png" alt="enter image description here"></a></p>