Блог

Я совсем новичок в этой теме и в настоящее время нахожусь в первых попытках проекта. Поэтому я надеюсь, что вы сможете мне помочь 🙂

Я использую гибкое описание с мат-картами, и первые три элемента работают так, как ожидалось. Однако последний элемент имеет не ту же высоту, что и другие, и я не могу это исправить.

Вот мой код:

 <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 и размер текста.

Я предполагаю, что в ra-listcard стилях компонентов следует объявить следующее:

 :host {
  display: block;
}

mat-card {
    height: 100%;
}
  

См. https://angular-9-material-starter-5k4ugj.stackblitz.io для упрощенной версии.

С помощью ответа Клеменса Суммирования я понял, как устанавливать свойства для родительских контейнеров, и я нашел решение своей проблемы:

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

mat-card {
 width: 100%;
}
  

Вы можете добавить 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>