Question

我有一个div，其中包含4个具有内容的“框”（我正在构建一个仪表板，所以这是出现在顶部的4个框）。这些框为最终用户提供摘要信息。我的问题是4个文本中的3个文本换行到第二行，因此这3个文本框的高度大于第1个。我需要确保第一个盒子的高度与其他所有盒子一样高（或更具体地讲，我要确保 ALL ）盒子长大，以便与其他盒子一样高。该行）。下面是代码：

Dashboard.component.html

Model.arel_table.type_cast_for_database(:id, 'test')
=> 0
Model.arel_table.type_cast_for_database(:id, '47test')
=> 47

Info-box.component.html

<div *ngIf="dataModel">
  <div class="mb-20 mr20 ml20 stretch" fxLayout="row" fxLayout.lt-md="column" fxFlex fxLayoutGap="20px">
    <div fxFlex>
      <app-info-box [bgClass]="'brown'"
                    [icon]="'receipt'"
                    [count]="this.dataModel.biggestExpense.totalAmount"
                    [label]="'Biggest Expense'"
                    [data]="this.dataModel.biggestExpense.category.charAt(0).toUpperCase() + this.dataModel.biggestExpense.category.substr(1)">
      </app-info-box>
    </div>
    <div fxFlex>
      <app-info-box [bgClass]="'blue'"
                    [icon]="'assignment_late'"
                    [count]="this.dataModel.mostExpensiveMonth.totalAmount"
                    [label]="'Most Expensive Month'"
                    [data]="this.dataModel.mostExpensiveMonth.title">
      </app-info-box>
    </div>
    <div fxFlex>
      <app-info-box [bgClass]="'yellow'"
                    [icon]="'assignment_returned'"
                    [count]="this.dataModel.leastExpensiveMonth.totalAmount"
                    [label]="'Least Expensive Month'"
                    [data]="this.dataModel.leastExpensiveMonth.title">
      </app-info-box>
    </div>
    <div fxFlex>
      <app-info-box [bgClass]="'purple'"
                    [icon]="'assignment_turned_in'"
                    [count]="this.dataModel.busiestMonth.totalAmount"
                    [label]="'Busiest Month'"
                    [data]="this.dataModel.busiestMonth.title">
      </app-info-box>
    </div>
  </div>
</div>

Info-box.component.scss

<mat-card [ngClass]="bgClass">
  <mat-card-header>
    <div mat-card-avatar>
      <mat-icon class="icon-lg">{{icon}}</mat-icon>
    </div>
    <mat-card-title>{{data}}</mat-card-title>
    <mat-card-subtitle>{{label}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-actions align="end">
    <div class="pr20" fxFlex>
      <a href="javascript:void(0)" class="card-inverse">
        {{ this.formatCount() }}
      </a>
    </div>
  </mat-card-actions>
</mat-card>

当前最终结果如下：

我想对其进行更改，以使所有盒子的高度都相同，并且当一个盒子长到容纳内容时，它们都会长大（因为它们都在同一行中）。有什么想法吗？

Angular fxFlex div不填充高度

0 个答案: