Angular Material Flexbox - How to add margin between wrapped rows?

Question

I'm using Angular Material and its flexbox functionality.

I have now come across an issue that seems to me should be simple, but I have problems with it.

I've created this Codepen for demostrating my issue.

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:

<div class="row" layout="row" layout-wrap="wrap">
    <div flex="50" class="item1"></div>
    <div flex="50" class="item2"></div>
    <div flex="50" class="item3"></div>
    <div flex="50" class="item4"></div>
</div>

And I'm using this CSS:

.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;
}

I want an even margin (let's say 10px) around each item all around them.

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.

I successfully get margins to left and right when I add a child div to an item and set margin: 10px; but top and bottom margins are totally ignored.

So, how can I get a row to wrap with a 10px margin between (vertically) each wrapped row?

Answer 1

You can try overriding part of this Angular directive:

flex="50" (which computes to flex: 1 1 50% [flex-grow, flex-shrink, flex-basis])

with this CSS:

.row > div {
    flex-basis: calc(50% - 20px) !important; /* width less horizontal margins */
    margin: 10px;
}  

Revised Codepen

Read more about CSS calc function.