从 fxLayoutGap 行的最后一个元素中删除填充

Question

我在使用 fxLayoutGap 时遇到问题。我列表的最后一列有填充，我不想要它。

如何保留 fxLayoutGap（space 卡之间）并删除最后一列的填充？谢谢！

<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 的 解决方案，但这里出现了一个新问题：

Answer 1

编辑： 尝试通过 ngFor 将 classes 分配给您的元素：

<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;
}

我不确定这是否是最好的方法，但它确实有效。

老ans: 只需添加一个css 样式:

[fxFlex]:last-of-type { padding-right:0px !important; }

如果不止一行：

[fxFlex]:nth-child(4n) { padding-right:0px !important; }

如果有更多的fxFlex元素，你可以分配一个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; }

Answer 2

您可以在 ngFor 中用索引指定行中的最后一项，假设有 4 列：

[class.flexLastItem]="((i-3) % 4 === 0)"

终于css

.flexLastItem{ margin-right: 0 !important; }

Answer 3

就做这个小动作吧。

删除 fxLayoutGap 并为子元素添加边距，并将相同边距的负值添加到父元素。

<div fxLayout="row wrap" style="margin-right: -16px;">
    <div fxFlex="calc(50% - 16px)" style="margin-right: 16px;">

    </div>
    <div fxFlex="calc(50% - 16px)" style="margin-right: 16px;">

    </div>
</div>

Answer 4

在 Whosebug 上发现：您必须在间隙中添加网格。

fxLayoutGap="5rem grid"

查看文档： https://github.com/angular/flex-layout/wiki/fxLayoutGap-API

从 fxLayoutGap 行的最后一个元素中删除填充

Remove padding from fxLayoutGap last element of row

angular-material

angular-flex-layout

angular