问题
I have a problem using fxLayoutGap. The last column of my list has a padding and I don't want it.
How to keep fxLayoutGap (space between cards) and remove the padding from the last column ? Thank !
<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>
The problem (in red) :
EDIT :
I used Abdul Rafay's solution but here a new problem :
回答1:
Edit: try assigning classes to your elements through ngFor
here:
<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"
}
}
then add these css
styles:
.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;
}
I'm not sure if it's the best way but it works.
Old ans: Simply add a css
styles:
[fxFlex]:last-of-type { padding-right:0px !important; }
If there's more than one row:
[fxFlex]:nth-child(4n) { padding-right:0px !important; }
If there's more fxFlex elements, you can assign a class:
<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
<div class="padding-fix" fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33">
...
.padding-fix[fxFlex]:nth-child(4n) { padding-right:0px !important; }
来源:https://stackoverflow.com/questions/52168018/remove-padding-from-fxlayoutgap-last-element-of-row