CSS-选择行中的每个最后一项并应用边距

Question

我的设计如下：

并且每次我悬停附件时，我都可以删除它：

有时，当附件很多并且我将附件悬停时，该行太长，并且该行中的最后一个附件跳到下一行。

我尝试用Google搜索它，发现了（nth-last（4n））的用法，但我不知道每行有多少个项目。

我想到了这样的事情：

last-child-in-a-row { margin-right: 10px; }

因此，在那种情况下，我将有足够的空间容纳不断增长的x元素。

是否有建议的解决方法/最佳实践？

编辑：

HTML（来自React）：

<div class="attachmentHolder">
  <button class="attachmentButton">
    <svg class="leftAttachment" ... />
    <a ...> some text </a>
    <svg class="attachmentClose" ... />
  </button>
  <button class="attachmentButton">
    <svg class="leftAttachment" ... />
    <a ...> some text 2 </a>
    <svg class="attachmentClose" ... />
  </button>
  ...
  ...
</div>

CSS：

.attachmentHolder {
  display: flex;
  flex-wrap: wrap;
}

.attachmentButton {
  padding-right: 0;
  padding-left: 6px;
  margin: 0 8px 10px 0;

  .attachmentClose {
    max-width: 0;
    transition: max-width .1s ease-out, margin-left .1s ease-out;
  }

  &:hover {
    .attachmentClose {
      max-width: 25px;
      margin-left: 8px;
      margin-right: 8px;
      fill: $secondary;
    }
  }
}


.leftAttachment {
  height: 20px;
  width: 15px;
  margin: 0 4px 3px 0;
}