Question

我正在使用Flex-layout构建一个小型角度应用程序，但遇到了麻烦。

在大屏幕上，所有设备都可以正常工作，但是对于小型设备，我希望每个属性占用一行。所以我为每一行设置属性fxFlex.lt-sm = 100。请找到下面的屏幕截图和我的代码。也许你们之一可以给我提示我做错了什么？

！[1] https://i.imgur.com/bd66eev.png“确定”
！[2] https://i.imgur.com/as3HzuJ.png“不正确”

我为每一行设置属性fxFlex.lt-sm = 100。请找到下面的屏幕截图和我的代码。也许你们之一可以给我提示我做错了什么？

<mat-card>
  <mat-list role="list">
    <mat-list-item
      role="listitem"
      *ngFor="let user of (usersState | async).users"
      class="users-list">
      <div
        fxFill
        fxLayout="row wrap"
        fxLayoutGap="5px">
        <div
          fxFlex="30"
          fxFlex.lt-sm="100">
          <p>{{ user.email }}</p>
        </div>
        <div
          fxFlex="20"
          fxFlex.lt-sm="100">
          <p>{{ user.username }}</p>
        </div>
        <div
          fxFlex="20"
          fxFlex.lt-sm="100">
          <p>{{ user.active ? 'Account active' : 'Account inactive'}}</p>
        </div>
        <div
          fxFlex.lt-sm="100">
          <p>actions</p>
        </div>
        <mat-divider></mat-divider>
      </div>
    </mat-list-item>
  </mat-list>
</mat-card>

mat-card不能适应内容的实际大小。

Answer 1

您的代码可以正常工作。但是，mat-list-item具有固定的height 48px。这就是为什么在小屏幕mat-list-item中高度不会按预期增长的原因。同样，mat-card也不适合内容的实际大小。

在height上覆盖mat-list-item可以解决两个问题。

.users-list {
    height: auto !important;
}

这是一个有效的演示：https://stackblitz.com/edit/angular-rgepcp

更改介质尺寸后，存储卡不会增长

1 个答案: