如何使用 Angular Flex 布局添加边距？答案

【问题标题】：How to add margin with Angular Flex Layout?如何使用 Angular Flex 布局添加边距？
【发布时间】：2018-06-17 19:35:34
【问题描述】：

如何在使用 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 容器的边距小于其外部的文本。

【问题讨论】：

标签： angular angular-flex-layout

【解决方案1】：

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

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

【讨论】：

您也可以使用以下语法：[style.margin-top.px]="12"

【解决方案2】：

你可以使用fxLayoutGap="20px"

【讨论】：

【解决方案3】：

只是为了确保您在组件中引用了您的 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 调试：

【讨论】：

启动开发者工具栏 - F12 - 在 Chrome 中调试你的容器类。我更新了答案

【解决方案4】：

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

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

【讨论】：