我使用fxLayoutGap时遇到问题。我列表的最后一列有一个填充,我不想要它。
如何保持fxLayoutGap(卡之间的空格)并从最后一列中删除填充?谢谢 !
<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
<div fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33">
<div fxFlexFill fxLayoutAlign="center center">
<mat-card (click)="addAdvert()" class="mat-card-add-button">
<div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
<span style="font-size:32px;text-align:center">+<br />test</span>
</div>
</mat-card>
</div>
</div>
<div fxFlex="calc(25%-20px)" fxFlex.md="33" *ngFor="let product of products | slice:0:3">
<div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center stretch">
<mat-card class="ad">
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-title>test</mat-card-title>
<mat-card-content>
<p>
test
</p>
</mat-card-content>
<mat-divider [inset]="true"></mat-divider>
<mat-card-actions align="end">
<button mat-icon-button matTooltip="edit" matTooltipShowDelay="800">
<mat-icon>mode_edit</mat-icon>
</button>
<button mat-icon-button matTooltip="delete" matTooltipShowDelay="800">
<mat-icon>delete</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>
问题(红色):
编辑:
我使用了Abdul Rafay的解决方案,但这里出现了一个新问题:
编辑:尝试通过ngFor
在这里为您的元素分配类:
<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
<div fxFlex="calc(25%-20px)" fxFlex.md="33"
*ngFor="let product of products;let i = index"
[ngClass]="'product-'+getClassName(i)">
...
.TS:
counter: number = 0;
getClassName(index) {
if(index%4 === 0)
this.counter = 0;
this.counter++;
switch(this.counter) {
case 1:
return "first"
case 2:
return "second"
case 3:
return "third"
default:
return "fourth"
}
}
然后添加这些css
样式:
.product-first[fxFlex] {
padding-right: 20px !important;
}
.product-second[fxFlex] {
padding-left: 6.66px !important;
padding-right: 13.34px !important;
}
.product-third[fxFlex] {
padding-left: 13.34px !important;
padding-right: 6.66px !important;
}
.product-fourth[fxFlex] {
padding-left: 20px !important;
padding-right: 0 !important;
}
我不确定它是否是最好的方式,但它有效。
旧的:只需添加一个qazxsw poi样式:
css
如果有多行:
[fxFlex]:last-of-type { padding-right:0px !important; }
如果有更多fxFlex元素,您可以指定一个类:
[fxFlex]:nth-child(4n) { padding-right:0px !important; }