如何在Angular Material设计组件中更改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>

以下是 mat 卡片的列表结果，但问题在于所有 mat 卡片的高度都与循环中第一个 mat 卡片的高度相同。是否有任何方法可以根据其所包含的内容使其动态变化？

- Talk is Cheap Show me Code

Answer 1

将fxFlexAlign="stretch"设置为相同高度的所有mat-card。

- Debattam Dey

Answer 2

将fxLayoutAlign="start start"添加到容器的div中，可以将卡片的对齐方式设置为您所需的方式。 StackBlitz演示 Flex-Layout fxLayoutAlign API文档 Flex-Layout演示游乐场

- p4r1

---

嘿，它像魔法一样运行良好，感谢Stackblitz演示。 - Talk is Cheap Show me Code

Answer 3

flex-layout 的默认行为是将组件沿交叉轴拉伸。在您的情况下，这是卡片的高度。这由 fxLayoutAlign 属性控制，默认值为 "start stretch"。要更改此设置，请将 fxLayoutAlign="start start" 添加到您的外部

中。有关更多信息，请参见 Angular Flex-Layout Demos 页面。

- G. Tranter

---

谢谢解释。我需要这个解释以便在进一步的开发中使用这个概念。 - Talk is Cheap Show me Code