如何使用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

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

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

Answer 2

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

Answer 3

您可以使用int main(int argc, char* argv[])

Answer 4

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

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