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.

score 12 · Answer 1 · answered Nov 21 '19 at 14:14

12

You can use [style.margin] attribute.

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

answered Nov 21 '19 at 14:14

Santandar

121
1
3

1

You could use the following syntax also: `[style.margin-top.px]="12"` – mrmashal Nov 16 '20 at 15:18

score 7 · Answer 2 · answered Jul 31 '18 at 14:02

7

You can use multiple flexbox container for that.

See fxLayoutGap too : https://github.com/angular/flex-layout/wiki/fxLayoutGap-API

answered Jul 31 '18 at 14:02

aksjer

71
1
4

score 7 · Answer 3 · answered May 28 '19 at 12:36

7

you may use fxLayoutGap="20px"

answered May 28 '19 at 12:36

Nelson Bwogora

2,225
1
18
21

score 1 · Answer 4 · answered Aug 25 '22 at 12:25

No Worries!

you can add as below,

<div class="container">
  hell
  <div fxLayout="column" fxLayoutAlign="center center" [style.marginBottom.px]="10" [style.marginTop.px]="10">
    <mat-card fxFill>Simple card test</mat-card>
  </div>
</div>

[style.marginBottom.px]="10" [style.marginTop.px]="10"

Sounds like this work.

score 0 · Answer 5 · edited Apr 15 '19 at 05:37

just to make sure that you have referenced your css in your component:

import {Component} from '@angular/core';

@Component({
  selector: 'card-overview-example',
  templateUrl: './card-overview-example.html',

  <-- make sure your css is referenced- -->
  styleUrls: ['./card-overview-example.css']
})

export class CardOverviewExample {}

Alternatively you could try an inline style like:

<div style="margin:60px">
  hell
  <div fxLayout="column" fxLayoutAlign="center center">
    <mat-card fxFill>Simple card test</mat-card>
  </div>
</div>

Then debug with F12:

fire up the developer toolbar - F12 - in Chrome an debug your container class. I updated the answer — Daniel, Jan 08 '18 at 20:33

How to add margin with Angular Flex Layout?

5 Answers5