angular - Angular FlexLayout Cards 相同的布局

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>

列表卡组件-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>

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

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

标签： angularangular-materialangular-flex-layout

Answer 1

您可以添加fxFlex标签，以便它们占用所有可用空间，如下所示：

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