CODEWITHSUNDEEP
angularflexbox
Moshe
Moshe

Reputation: 2684

Angular Flexbox limit cards per row

I have a component, and I am trying to display a limit of x cards in a row, and let the overflow (x+) scroll on the x-direction. I have something started, but as you'll see in the image below, I cannot get x cards in a row. (I would like it to have a fixed width so the cards look uniform)

  <div fxLayout="row"  fxLayoutWrap="noWrap" style="overflow-x: scroll">
  <md-card *ngFor="let car of garage" fxLayout="column">
    <md-card-title fxFlex="20">
        {{car.year.year}} {{car.make.name}} {{car.model.name}}
    </md-card-title>
    <md-card-subtitle fxFlex="10">
      {{car.name}}
    </md-card-subtitle>
    <md-card-content *ngIf="car.config.currentOptions.length !== 0; else noOptions" fxFlex="50">
        Configured Options
      <ul>
        <li *ngFor="let option of car.config.currentOptions">{{car.config.featuresMap[option].name}} {{car.config.featuresMap[option].price?.baseMSRP}}</li>
      </ul>
    </md-card-content>
    <ng-template #noOptions>
      <md-card-content  fxFlex="50">
        No Options Configured
      </md-card-content>
    </ng-template>
    <md-card-subtitle fxFlex="20">
      Lease: {{ car.lease.leaseStart}} <br />
      OnePay: {{car.lease.onePayStart}}
    </md-card-subtitle>
  </md-card>
  </div>


</div>

Garage

Upvotes: 1

Views: 1207

Answers (1)

rick
rick

Reputation: 567

I know it is too late, but there is no answer yet about it in stackoverflow currently in Angular 9. So I will put my code here if somebody still is facing this issue:

HTML

<div class="container">
  <div
    fxLayout="row wrap"
    fxLayout.lt-sm="column"
    fxLayoutGap="32px"
    fxLayoutAlign="flex-start">
    <ng-container *ngFor="let app of apps">
      <mat-card
        (click)="goToApp(app)"
        fxFlex="0 1 calc(33.3% - 32px)"
        fxFlex.lt-md="0 1 calc(50% - 32px)"
        fxFlex.lt-sm="100%"
        class="mat-elevation-z6">
        <mat-card-header>
          <mat-card-title>{{app.name}}</mat-card-title>
          <mat-card-subtitle>{{app.description}}</mat-card-subtitle>
          <img mat-card-avatar [src]="app.image" alt='Logo'/>
        </mat-card-header>
        <mat-card-content>
        </mat-card-content>
      </mat-card>
    </ng-container>
  </div>
</div>

CSS

.cardList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Column Gap */
.cardList > * {
  box-sizing: border-box;
}

.cardList > *:not(:last-child) {
  margin-right: 32px;
}

/* Item sizing */
.cardListItem {
  flex: 0 1 calc(33.3% - 32px);
}

/* medium size viewport */
@media screen and (max-width: 959px) {
  /* Column Gap */
  .cardList > *:not(:last-child) {
    margin-right: 32px;
  }

  /* Item sizing */
  .cardListItem {
    flex: 0 1 calc(50% - 32px);
  }
}

/* small size viewport */
@media screen and (max-width: 599px) {
  .cardList {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .cardList > *:not(:last-child) {
    margin-right: unset;
    margin-bottom: 32px;
  }
}

Obviously you can play with math and setup whatever you like.

Upvotes: 2

Related Questions