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

Question

I am using Angular Material and its flexbox functionality.

Now I am faced with a problem that seems simple to me, but I have problems with it.

I created this Codepen to demonstrate my problem.

Thus, I have a row with elements that exceed 100% of this row and have the wrapper turned on, so I get two rows of elements without fields, for example:

<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 use 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 a flat edge around each element (let’s say 10 pixels).

I tried setting the fields as usual, but then the elements do not wrap correctly and give me only one element for each row. I still want 2 items per line.

I successfully get the fields left and right when I add a child div to the element and set margin: 10px; , but the upper and lower margins are completely ignored.

So, how can I make a string wrap with a 10px edge between (vertically) each wrapped string?

Answer 1

You can try to override 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

More on CSS calc function.