@angular/flex-layout 具有行距和列距？答案

【问题标题】：@angular/flex-layout with row and column spacing?@angular/flex-layout 具有行距和列距？
【发布时间】：2019-06-01 02:38:14
【问题描述】：

StackBlitz (live demo)

<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、fxLayoutAlign 和各种gd 前缀。

【问题讨论】：

直截了当的解决方案怎么样：mat-card{ margin:5em }
当然，我可以使用mat-card {margin-bottom: 5em;}，而且我总是可以处理第 n 个类并为列做同样的事情。但是我不应该为此使用@angular/flex-layout 吗？ - 这似乎是一个常见的用例。

标签： angular flexbox angular-material angular-flex-layout

【解决方案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 的网格选项应该对您有所帮助。

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

【讨论】：

是的，我试过了，它不起作用。打开这个全屏看看我的意思：angular-wzuwtp.stackblitz.io - 你得到列之间的差距，但不是行之间的差距
根据文档，我认为 grid 选项是您想要的，但是在研究我的答案时，我注意到它似乎不起作用（它似乎让事情变得更糟！）。我创建了一个issue，因为我认为这是 flex-layout 的问题
根据我从开发人员对网格问题的响应中了解到的信息查看我的更新答案

【解决方案2】：

您需要在fxLayoutGap中添加grid。

fxLayout="row wrap"  fxLayoutGap="10px grid"

【讨论】：