如何在角度材料设计组件中更改 Mat-Card 元素的高度

Question

我在 angular 5 应用程序中有以下代码。它使用 *ngFor 生成如下图所示的 mat-card 序列。但是所有 mat-card 的高度与第一个 mat-card 的高度相同。

         <div fxLayout="row">
          <mat-card *ngFor="let section1 of sections" fxFlex="33" style="margin: 15px;">
               <mat-card-header>
                    <mat-card-title>{{section1}}</mat-card-title>
               </mat-card-header>
               <mat-card-content>
                    <form>
                      <!-----form data goes here ---->
                    </form>

               </mat-card-content>

         </mat-card>

      </div>

结果是下面的垫卡列表，但问题是所有垫卡的高度与循环中第一张垫卡的高度相同。有没有办法根据它承载的内容使其动态化？

Answer 1

设置fxFlexAlign="stretch"为使所有垫卡高度相同。

Answer 2

将 a 添加fxLayoutAlign="start start"到容器div会将卡片的对齐方式设置为您要查找的内容。StackBlitz 演示

Flex 布局 fxLayoutAlign API 文档

Flex-Layout 演示游乐场