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

【问题标题】：How to change height of Mat-Card element in angular material design component如何在角度材料设计组件中更改 Mat-Card 元素的高度
【发布时间】：2018-03-13 06:28:52
【问题描述】：

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

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

【问题讨论】：

标签： angular material-design angular-material2

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

Flex-Layout fxLayoutAlign API docs

Flex-Layout demo playground

【讨论】：

嘿，它的工作就像一个魅力，感谢 Stackblitz 演示。

【解决方案3】：

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

【讨论】：

感谢您的解释。我需要这个解释，以便我可以在进一步的开发中使用这个概念。