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

Question

我在angular 5 app中有以下代码。使用* ngFor生成如下图像的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-card的高度与循环中第一个mat卡的高度相同。有没有什么方法可以根据它带来的内容使其动态化？

Answer 1

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

Flex-Layout fxLayoutAlign API docs

Flex-Layout demo playground

Answer 2

flex-layout的默认行为是跨越横轴拉伸组件。在你的情况下，这是卡的高度。这由fxLayoutAlign属性控制，默认为"start stretch"。要更改此设置，请将fxLayoutAlign="start start"添加到您的外部<div fxLayout="row">。有关详细信息，请参阅Angular Flex-Layout Demos页面。

Answer 3

设置fxFlexAlign="stretch"，使所有席卡处于相同的高度。