从 fxLayoutGap 行的最后一个元素中删除填充 [英] Remove padding from fxLayoutGap last element of row

查看：36
本文介绍了从 fxLayoutGap 行的最后一个元素中删除填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

如何保留 fxLayoutGap(卡片之间的空间)并删除最后一列的填充?谢谢！

<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px 网格" 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>

</mat-card>

<div fxFlex="calc(25%-20px)" fxFlex.md="33" *ngFor="let product of products | slice:0:3"><div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="中心拉伸"><mat-card class="ad"><img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="柴犬的照片"><mat-card-title>测试</mat-card-title><mat-card-content><p>测试</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 mat-icon-button matTooltip="delete" matTooltipShowDelay="800"><mat-icon>删除</mat-icon></mat-card-actions></mat-card>

问题(红色):

更新

我使用了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:

 计数器:number = 0;获取类名(索引){如果(索引%4 === 0)this.counter = 0;this.counter++;开关(这个.计数器){情况1:返回第一"案例2:返回第二个"案例3:返回第三个"默认:返回第四个"}}

然后添加这些css样式:

.product-first[fxFlex] {padding-right: 20px !important;}.product-second[fxFlex] {padding-left: 6.66px !important;padding-right: 13.34px !important;}.product-第三[fxFlex] {padding-left: 13.34px !important;padding-right: 6.66px !important;}.product-fourth[fxFlex] {padding-left: 20px !important;padding-right: 0 !important;}

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

旧答案:只需添加一个css样式:

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

如果有多于一行:

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

如果有更多的 fxFlex 元素，您可以分配一个类:

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

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):

Update

I used Abdul Rafay's solution but here a new problem:

解决方案

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

这篇关于从 fxLayoutGap 行的最后一个元素中删除填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆