Angular Material Flexbox - How to add margin between wrapped rows?
<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>