我们目前正在使用Angular作为具有fx-layout API的前端,以提高响应能力。
[当我们使用fxLayout =“ column”时,所有元素都被折叠并且似乎没有任何高度。
使用fx-layout / flex处理这些情况时的最佳实践是什么?
在弹性布局中使用角度9.0.0rc“:” ^ 8.0.0-beta.27
浏览器列表设置
0.5%最近2个版本Firefox ESR没死#IE 9-11
这里是来自IOS Safari(12)的图像
这里是镀铬的图像
这里是重复的容器,显示上图中显示的列表
<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>
safari的问题出现在此元素上((mat-card-content中的第二个容器):
<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
safari上的flex导致css中出现了怪异的指数,如下所示:flex:1 1 1.12e-16
更改fxFlex为fxFlex =“ grow”在Safari上生成,此css flex:1 1 100%固定高度!
可能在fxLayout =“ column”父容器中具有fxFlex的所有子级在Safari中都需要此设置