Angular FlexLayout Cards 相同的布局答案

【问题标题】：Angular FlexLayout Cards same LayoutAngular FlexLayout Cards 相同的布局
【发布时间】：2021-02-06 07:28:57
【问题描述】：

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

我正在使用带有垫卡的 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 大小和文本对齐设置。

【问题讨论】：

标签： angular angular-material angular-flex-layout

【解决方案1】：

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

:host {
  display: block;
}

mat-card {
    height: 100%;
}

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

【讨论】：

【解决方案2】：

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

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

mat-card {
 width: 100%;
}

【讨论】：

【解决方案3】：

您可以在标签中添加 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>

【讨论】：