Angular 材质 - 弹性布局和卡片答案

【问题标题】：Angular material - flex layout and cardsAngular 材质 - 弹性布局和卡片
【发布时间】：2019-09-21 10:35:21
【问题描述】：

我对基于 Angular Material 的应用程序中的 flex 布局行为有疑问。我想要一个简单的“卡片网格”布局，排成 3 张卡片（最大的屏幕），2 张中等大小的卡片和 1 张小屏幕的卡片。问题是当我在最大屏幕的最后一行只有一张卡时，因为最后一张卡的宽度是屏幕宽度的 100%。如何避免这个问题？

这是我当前的代码。

<div class="page-wrapper">
  <div fxLayout="row wrap" fxLayoutGap="16px" class="align" *ngIf="!loading">
    <mat-card fxFlex.lg="calc(33% - 16px)" fxFlex.lt-lg="calc(50% - 16px)" fxFlex.xs="calc(100% - 16px)"
              *ngFor="let post of posts">
      <mat-card-header>
        <mat-card-title>{{ getCleanString(post.title.rendered) }}</mat-card-title>
        <mat-card-subtitle>{{ post.date_gmt | date }}</mat-card-subtitle>
      </mat-card-header>
      <img matCardImage [src]="post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url"
           class="card-image">
      <mat-card-content [innerHTML]="post.excerpt.rendered"></mat-card-content>
      <mat-card-actions align="start">
        <a mat-button color="primary" [href]="post.link">Czytaj więcej</a>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

编辑：卡之间的间隙没有问题。问题是最后一张卡片具有整个布局的 100% 宽度（不是其他的 1/3）。

【问题讨论】：

如何才能看到最后一行？
我希望所有卡片都具有相同的宽度，最后一张也是如此。因此，例如在“lg”情况下 - 所有卡片的宽度都应为 33%。

标签： angular angular-flex-layout angular-material-7

【解决方案1】：

尝试像这样将0 0 添加到fxFlex.lg：fxFlex.lg="0 1 calc(33% - 16px)"。

这将删除 flex-grow。

注意：您必须将 margin-right: 16px; 添加到最后一个元素才能获得正确的对齐方式

【讨论】：