Angular FlexLayout 卡相同布局

Question

我对这个主题很陌生，目前正处于项目的第一次尝试中。所以我希望你能帮助我:)

我正在使用带有垫卡的 FlexLayout，前三个元素按预期工作。但是，最后一个元素的高度与其他元素不一样，我无法解决这个问题。

这是我的代码：

<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard></ra-doughnutcard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard></ra-doughnutcard>
 </div>
 <div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-linecard></ra-linecard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-listcard></ra-listcard>
 </div>
</div>

Listcard-Component-html:

<mat-card class="mat-elevation-z5">
 <mat-card-title>
  <h5>Text</h5>
 </mat-card-title>
 <mat-card-content>
  <mat-list-item *ngFor="let item of items"> {{ item }} </mat-list-item>
 </mat-card-content>
</mat-card>

没有标签 ra-listcard 它似乎工作。我也尝试了 FlexLayout 的拉伸对齐但没有成功。我认为作为父容器的 ra-listcard 设置了错误的高度，我该如何解决这个问题？

在 CSS 中只有 h5 大小和文本对齐设置。

Answer 1

我的猜测是在 ra-listcard 组件样式中声明以下内容：

:host {
  display: block;
}

mat-card {
    height: 100%;
}

有关简化版本，请参阅 https://angular-9-material-starter-5k4ugj.stackblitz.io。

Answer 2

在 Clemens Sums 回答的帮助下，我了解了如何在父容器上设置属性，并且找到了解决我的问题的方法：

:host {
 display: flex;
 height: 100%;
}

mat-card {
 width: 100%;
}

Answer 3

您可以在您的标签中添加 fxFlex，以便它们占用所有可用的 space，如下所示：

<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard fxFlex></ra-doughnutcard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard fxFlex></ra-doughnutcard>
 </div>
 <div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-linecard fxFlex></ra-linecard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-listcard fxFlex></ra-listcard>
 </div>
</div>

Angular FlexLayout 卡相同布局

Angular FlexLayout Cards same Layout

angular

angular-material

angular-flex-layout