Question

StackBlitz (live demo)

vehicleSport(vehicleSport, 4);
vehicleSport(vehicleSportTwo, 4);
vehicleSport(vehicleSportThree, 4);

vehicleSport(vehicleSport, sizeof(vehicleSport) / sizeof(vehicleSport[0]);在组件上的定义如下：

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="10px">
  <mat-card *ngFor="let o of cards">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{o.title}}</mat-card-title>
      <mat-card-subtitle>{{o.subtitle}}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="o.url" alt="Photo of {{o.title}}">
    <mat-card-content>
      <p>
        {{o.content}}
      </p>
    </mat-card-content>
  </mat-card>
</div>

但是，我尝试过的任何操作都不给行间距。我已经尝试过cards，// const url = 'https://material.angular.io/assets/img/examples/shiba2.jpg'; cards: {title: string, subtitle: string, content: string, url: string}[] = [ { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url }, ];和各种带有前缀fxFlexOffset的前缀。

Answer 1

我认为您想要的是fxLayoutGap，这在每个弹性项目之间都留有空隙。在您的示例中，这将是一个水平差距。

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="16px grid">
  <div fxFlex *ngFor="let o of cards">
    <mat-card fxFlex>
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>{{o.title}}</mat-card-title>
        <mat-card-subtitle>{{o.subtitle}}</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image [src]="o.url" alt="Photo of {{o.title}}">
      <mat-card-content>
        <p>
          {{o.content}}
        </p>
      </mat-card-content>
    </mat-card>
  </div>
</div>

如果您还希望包装的行之间有垂直间隔，我认为fxLayoutGap的grid选项应该可以帮助您。

edit：听起来您确实需要grid选项。我对此也感到困惑，因此我在flex-layout GitHub上打开了一个issue。事实证明，网格功能的工作方式存在一些限制。网格行之间的装订线不会应用于flex容器的直接子级，因此我们只需要添加另一个div即可使工作正常。我已经用工作结果更新了上面的代码和here is a stackblitz。

@ angular / flex-layout具有行和列的间距？

1 个答案: