@angular/flex-layout with row and column spacing?

Question

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>

Where cards is defined on the Component as:

// 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 },
];

However nothing I've tried gives spacing on the rows. I've tried fxFlexOffset, fxLayoutAlign and the various gd prefixed ones.

Answer 1

I think what you want might be fxLayoutGap, which puts a gap between each flex item. in your example, it would be a horizontal gap.

<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>

If you also want a vertical gap between wrapped rows, I think the grid option of fxLayoutGap should help you.

edit: It sounds like you do need the grid option. I too was confused about this, so I opened an issue on the flex-layout GitHub. It turns out that there are some limitations with how the grid feature works. The gutters between grid rows will not be applied to direct children of the flex container, so we just need to add another div so things can work. I have updated the above code and here is a stackblitz with a working result.