title: margin with flex wrap
body: <p>I am trying to add some spacing between the divs using <code>display: flex</code> and <code>flex-wrap: wrap</code>.</p>
  
  <p>The problem is that when I apply <code>margin-right</code> to the second item, the row breaks. How can I add some spacing between the items without breaking them in 2 rows?</p>
  
  <h2><a href="https://jsfiddle.net/brunodd/ja6820vu/7/" rel="noreferrer">jsFiddle</a></h2>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  // Default
  // ----------------------------------------------------
  .collage {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .collage-item {
    width: 100%;
    height: 25vw;
    background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat;
    background-size: cover;
    flex: 0 0 50%;
    &amp;: nth-child(1) {
      margin-bottom: 16px;
    }
    &amp;:nth-child(2) {
      margin-right: 16px;
    }
    &amp;:nth-child(4) {
      margin-top: 16px;
    }
    &amp;:nth-child(1),
    &amp;:nth-child(4) {
      flex: 0 0 100%;
      height: 50vw;
    }
  }
  // Button
  // ----------------------------------------------------
   .btn {
    position: absolute;
    border: 2px solid white;
    padding: 10px 18px;
    text-align: center;
    right: 16px;
    bottom: 16px;
    color: white;
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="collage"&gt;
    &lt;div class="collage-item"&gt;&lt;/div&gt;
    &lt;div class="collage-item"&gt;&lt;/div&gt;
    &lt;div class="collage-item"&gt;&lt;/div&gt;
    &lt;div class="collage-item"&gt;&lt;/div&gt;
    &lt;div class="btn"&gt;View all 11 photos&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>