title: Angular Material Flexbox - How to add margin between wrapped rows?
body: <p>I'm using Angular Material and its flexbox functionality.</p>
  
  <p>I have now come across an issue that seems to me should be simple, but I have problems with it.</p>
  
  <p>I've created <a href="https://codepen.io/anon/pen/grZowk" rel="nofollow">this</a> Codepen for demostrating my issue.</p>
  
  <p>So I have a row with items that exceed 100% of that row and has wrap enabled, so I get two rows of items without margins, like this:</p>
  
  <pre><code>&lt;div class="row" layout="row" layout-wrap="wrap"&gt;
      &lt;div flex="50" class="item1"&gt;&lt;/div&gt;
      &lt;div flex="50" class="item2"&gt;&lt;/div&gt;
      &lt;div flex="50" class="item3"&gt;&lt;/div&gt;
      &lt;div flex="50" class="item4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I'm using this CSS:</p>
  
  <pre><code>.row {
      background-color: grey;
      padding: 10px;
  }
  
  .item1 {
      height: 200px;
      background-color: blue;
  }
  
  .item2 {
      background-color: red;
  }
  
  .item3 {
      backgronud-color: black;
      height: 100px;
  }
  
  .item4 {
      background-color: green;
  }
  </code></pre>
  
  <p>I want an even margin (let's say 10px) around each item all around them.</p>
  
  <p>I've tried setting margins like normal, but then the items don't wrap correctly and give me only one item per row. I still want 2 items per row.</p>
  
  <p>I successfully get margins to left and right when I add a child div to an item and set <code>margin: 10px;</code> but top and bottom margins are totally ignored.</p>
  
  <p>So, how can I get a row to wrap with a 10px margin between (vertically) each wrapped row?</p>