Как использовать ngFor, чтобы карты оставались в ряд в Angular 6?

Question

ngFor Сгенерированные карты накладываются друг на друга, а не остаются в ряд.

Я генерирую карты через ngFor, я использую fxFlex="30" для каждой карты, но они сложены друг на друга. я использовал flex-wrap также, но не работал.

<div fxFlex *ngIf="designs" [@expand]>
  <div fxLayout="column" fxLayout.gt-sm="row" style="display: inline" *ngFor="let design of designs">
    <div fxFlex="30">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            <h2>{{design.label}}</h2>
          </mat-card-title>
          <mat-card-subtitle>
            <h3>{{design.time}}hr</h3>
          </mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src="{{BaseURL + design.image}}">
        <mat-card-content>
          <p>{{design.description}}</p>
        </mat-card-content>
        <mat-card-actions style="margin: auto;">
          <button mat-stroked-button routerLink="/contact" color="primary">Book Now</button>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</div>

Я хочу, чтобы мои сгенерированные карты были в ряд. Но на самом деле они сложены друг на друга.

Answer 1

Важно обратить внимание на мелкие детали на странице Angular Flex. Подобные вещи начинали с меня несколько раз, когда я не был знаком с flex до его использования.

С помощью fxLayout в основном сообщает элементу, каким контейнером он будет. В этом случае вы, вероятно, хотите переместить *ngFor к тому же Div, который имеет fxFlex="30" и, если повезет, вы сможете переместить их обоих на карту.

<div fxFlex *ngIf="designs" [@expand]>
  <div fxLayout="column" fxLayout.gt-sm="row" style="display: inline">
    <div fxFlex="30" *ngFor="let design of designs">

В зависимости от того, для чего вам это нужно, Grid также может сильно помочь.