Angular中使用*ngFor时如何移除Div间的多余边距？

问题场景 #

在Angular项目的popular组件中，通过*ngFor遍历对象数组渲染<div>元素，搭配Flex布局设置了smallCard、bigCard及父容器popular的样式，但第二个元素后出现了多余边距，需要解决这个问题。

当前代码 #

组件HTML代码

<div class="smallCard" [ngClass]="first? 'bigCard': 'smallCard'" *ngFor="let popular of populars; let first = first;">
    <img src={{popular.imageArticle}} alt="img1">
    <h3>{{ popular.title }}</h3>
    <p>{{ popular.caption }}</p>
    <reactions></reactions>                             
</div> 

子元素样式

.smallCard{   
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px 0 ;
    max-width: 310px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    background: #FFFFFF;
    max-height: 260px;
}

.bigCard{min-height: 540px;}

父容器调用及样式

<app-popular-articles class="popular"></app-popular-articles>

.popular{
    display: flex;
    max-width: 660px;
    flex-flow: row wrap;
    justify-content: end;
    z-index: 9;
    align-content: flex-start;
}

解决方案 #

方法1：用CSS选择器精准移除边距

父容器宽度660px，第一个bigCard和第二个smallCard各占310px，刚好填满容器，但第二个元素的margin-right:20px会导致溢出换行并产生多余边距。直接给第二个元素去掉右侧边距：

.smallCard:nth-child(2) {
  margin-right: 0;
}

方法2：用Flex原生gap替代margin（更推荐）

Flex布局的gap属性专门用来控制元素间距，不会出现换行时的多余边距问题，比手动设置margin更可靠：

1. 修改子元素样式，移除margin：

.smallCard{   
    display: flex;
    flex-direction: column;
    max-width: 310px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    background: #FFFFFF;
    max-height: 260px;
}

2. 给父容器添加gap属性：

.popular{
    display: flex;
    max-width: 660px;
    flex-flow: row wrap;
    justify-content: end;
    z-index: 9;
    align-content: flex-start;
    gap: 20px; /* 替代margin的间距设置 */
}

方法3：通过Angular模板变量动态控制

在*ngFor中添加索引变量，判断是否为第二个元素，动态绑定样式移除边距：
修改HTML代码：

<div class="smallCard" 
     [ngClass]="{'bigCard': first, 'no-right-margin': index === 1}" 
     *ngFor="let popular of populars; let first = first; let index = index;">
    <img [src]="popular.imageArticle" alt="img1">
    <h3>{{ popular.title }}</h3>
    <p>{{ popular.caption }}</p>
    <reactions></reactions>                             
</div>

添加对应样式：

.no-right-margin {
  margin-right: 0;
}

内容的提问来源于stack exchange，提问作者Itra