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

Tags: html,css,css3,flexbox,angular-material

Problem :

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>

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?

Solution :

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.

    CSS Howto..

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    Does anyone know how's layout works?

    CSS preprocessors workflow - how does it really work?

    How to vertically align a DIV next to an image?

    How can i align the text in center of a row in css?

    How to trigger one element inside a div on mouse hover in CSS

    CSS Web fonts how to use it with use of @font-face its not working

    How to make a gallery

    how can I make my image (down arrow) disappear when I start scrolling my page?

    How to make responsive video container div?

    How to correctly style a form?

    How to snap divs together vertically in CSS like Pinterest have

    How to setup a multi-department form using JavaScript

    How to reference css and script files into a node.js app?

    how do you link static pages in rails to your css files? [closed]

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    How to make a CSS button work correctly?

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How to use Segoe Print font in CSS?

    How to remove some css properties using regular expression?

    How to move this structure to the right without using float?

    css button with arrow… how to move arrow

    iPhone iOS how to send an HTML email with CSS styling?

    how to bench a css pseudo-elements

    How to prevent fixed image from scrolling down?

    How to indent text in a select drop down menu using CSS

    how to add dots (…) with the same width?

    How to modify how TinyMCE format text

    How to make the height REALLY 100%

    How to vertical align icon inside label and button in the same way