@ angular / flex-layout с расстоянием между строками и столбцами?

StackBlitz (живая демонстрация)

<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 префиксы.


angular flexbox angular-material angular-flex-layout
person A T    schedule 05.01.2019    source источник
comment
как насчет решения прямо к делу: mat-card {margin: 5em}   -  person Vega    schedule 06.01.2019
comment
Конечно, я мог бы сделать mat-card {margin-bottom: 5em;}, и я всегда мог бы возиться с nth-классами и сделать то же самое для столбцов. Но разве я не могу использовать для этого @angular/flex-layout? - Похоже на обычный вариант использования.   -  person A T    schedule 06.01.2019

Ответы (1)


arrow_upward
18
arrow_downward

Я думаю, вам может понадобиться 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 должна вам помочь.

edit: Похоже, вам нужна опция сетки. Меня это тоже смутило, поэтому я открыл проблему на гибком макете. GitHub. Оказывается, есть некоторые ограничения на то, как работает функция сетки. Промежутки между строками сетки не будут применяться к прямым дочерним элементам гибкого контейнера, поэтому нам просто нужно добавить еще один div, чтобы все могло работать. Я обновил приведенный выше код и вот stackblitz с рабочим результатом.

person Benjamin Kindle    schedule 06.01.2019
comment
Да, я пробовал, не работает. Откройте этот полноэкранный режим, чтобы понять, что я имею в виду: angular-wzuwtp.stackblitz.io - вы получите пробел между столбцами, но не между строками - person A T; 06.01.2019
comment
Основываясь на документации, я думаю, что вариант сетки - это то, что вам нужно, но, исследуя свой ответ, я заметил, что он, похоже, не работает (кажется, только ухудшает ситуацию!). Я создал проблему, потому что думаю, что это проблема с гибким макетом - person Benjamin Kindle; 06.01.2019
comment
См. Мой обновленный ответ, основанный на том, что я узнал из ответа разработчика на проблему с сеткой. - person Benjamin Kindle; 06.01.2019