How to add margin with Angular Flex Layout?

angular angular-flex-layout
Christian picture Christian · Jan 8, 2018 · Viewed 21.8k times · Source

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.

enter image description here

Answer

aksjer picture aksjer · Jul 31, 2018

You can use multiple flexbox container for that.

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

Related questions

Set width on input mat-form-fields for angular material

I am so very new to Angular, and I am trying to create a form with longer-than-default input fields. This is my current code: person.component.html <form class="new-person-form"> <mat-card> <mat-form-field> <input …

Read More
How to center vertically with Angular Flex Layout?

I've created a simple login component and I'd like to vertically center, but I'm not sure how to achieve this using the Angular Flex Layout library. app.component.html <router-outlet></router-outlet> login.component.html <div …

Read More
Angular Material tab height

I am trying to have a full page Angular Material tab which has tabs which are full height and have a centered message. I have created this stakblitz as I can't get it to work. The fxFill's don't seem to …

Read More