Question

我有一个组件，我试图连续显示x卡的限制，并让溢出（x +）在x方向上滚动。我已经开始了，但正如你在下面的图片中看到的那样，我无法连续获得x卡。（我希望它有一个固定的宽度，所以卡看起来很均匀）

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

Answer 1

我知道为时已晚，但是目前在Angular 9中的stackoverflow中还没有答案。因此，如果有人仍然面临此问题，我将把代码放在这里：

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

很显然，您可以玩数学并设置所需的内容。

每行Angular Flexbox限制卡

1 个答案: