How to add margin with Angular Flex Layout?

Question

How can I add margin or padding to a container when using the Flex Layout Module?

Template:

<div class="container">
  hell
  <div fxLayout="column" fxLayoutAlign="center center">
    <mat-card fxFill>Simple card test</mat-card>
  </div>
</div>

Style:

.container{
    margin: 60px;
}

I noticed it doesn't seem to be adding the correct amount of margin. You'll be able to see in the screenshot, the flex container has less margin than the text outside of it.

Answer 1

you may use fxLayoutGap="20px"

Answer 2

You can use [style.margin] attribute.

div fxLayout="row" fxLayoutGap="12px" [style.margin-top]="'12px'" [style.margin-left]="'10px'"