使用 fx-layout="column" 的 Safari IOS 的 Flex 布局显示问题答案

【问题标题】：Flex layout display problem with Safari IOS using fx-layout="column"使用 fx-layout="column" 的 Safari IOS 的 Flex 布局显示问题
【发布时间】：2020-01-15 20:25:21
【问题描述】：

我们目前使用 Angular 作为前端，并带有 fx-layout api 以实现响应。

当我们使用 fxLayout="column" 时，所有元素都被折叠并且似乎没有任何高度。

使用 fx-layout/flex 处理这些场景的最佳做法是什么？

使用 angular 9.0.0rc 和 flex-layout": "^8.0.0-beta.27

浏览器列表设置

0.5% 最后 2 个版本火狐 ESR 没死 # IE 9-11

这是来自 IOS Safari (12) 的图片

这是来自 chrome 的图片

这里是显示上图中的列表的重复容器

  <div *ngIf="!(dataSource.loading$ | async)">
<mat-card  class="pointer mb-2" *ngFor="let quotation of dataSource.quotations$ | async"
  (click)="onClickRow(quotation)">
  <mat-card-content fxLayout="row" fxLayoutGap.gt-xs="15px" fxLayout.xs="column" fxLayoutAlign="start center"
    fxLayoutAlign.xs="center center">

    <div fxLayout="column" fxLayoutAlign="center center">
      <img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && quotation.customer.photoUrl"
        [src]="quotation.customer.photoUrl" alt="">
      <img class="profile-picture" *ngIf="authSvc.currentUser.hasCustomerRights && quotation.salesRep.photoUrl"
        [src]="quotation.salesRep.photoUrl" alt="">
      <img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && !quotation.customer.photoUrl"
        src="https://storage.googleapis.com/edcommerce/businesslogic/images/placeholder/avatar.jpg" alt="">
    </div>

    <div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
      <div fxLayout="row" *ngIf="authSvc.currentUser.hasSalesRights">
        <span class="mat-body">{{quotation.createdDate | edDate}}</span>
      </div>
      <div fxLayout="row" fxLayoutAlign.xs="center center">
        <span class="mat-h2 m-0">{{quotUtils.getVehicleDescription(quotation)}}</span>
      </div>

      <div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasSalesRights"
        fxLayoutAlign="start center">
        <span class="mat-body">{{ts('common.user.text.roles.customer')}}</span>
        <span class="mat-body">{{quotation.customer.fullName}}</span>
      </div>

      <div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasBuyerRights"
        fxLayoutAlign="start center">
        <span class="mat-body">{{ts('common.user.text.roles.sales_rep')}}</span>
        <span class="mat-body">{{quotation.salesRep.fullName}}</span>

      </div>

      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="10px" fxLayoutAlign="start center">
        <span class="mat-body">{{ts('page.quotations.text.step_required')}}</span>
        <span
          class="mat-body-2 color-primary">{{enumUtils.Quotation.getStatusDescByRole(quotation.status,statusTypes)}}</span>
      </div>
    </div>

  </mat-card-content>
</mat-card>
  </div>

【问题讨论】：

标签： css ios iphone angular safari

【解决方案1】：

Safari 的问题出现在这个元素上（mat-card-content 中的第二个容器）：

<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">

Safari 上的 flex 在 CSS 中产生了一个奇怪的指数数字，如下所示：flex: 1 1 1.12e-16

更改 fxFlex 为在 safari 上生成的 fxFlex="grow" 这个 css flex : 1 1 100% 固定高度！

【讨论】：