angular - 如何使用 Angular Flex 布局添加边距？

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

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

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

Answer 2

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

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

Answer 3

你可以使用fxLayoutGap="20px"

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 调试：