如何使用 Angular Flex Layout 添加边距？

Question

使用 Flex 布局模块时如何向容器添加边距或填充？

模板：

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

风格：

.container{
    margin: 60px;
}

我注意到它似乎没有添加正确数量的保证金。您将能够在屏幕截图中看到，flex 容器的边距小于其外部的文本。

Answer 1

你可以使用fxLayoutGap="20px"

Answer 2

您可以使用 [style.margin] 属性。

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

Answer 3

您可以为此使用多个 flexbox 容器。

也见 fxLayoutGap：https : //github.com/angular/flex-layout/wiki/fxLayoutGap-API

Answer 4

只是为了确保您已在组件中引用了 css：

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 {}

或者，您可以尝试内联样式，例如：

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

然后用F12调试：