css - 从包装元素的最后一行删除边距底部

Question

如何只为不在最后一行的元素保留底部边距？

.container {
  display: flex;
  flex-flow: row wrap;
  background: green;
  justify-content: space-between;
}

.block {
  height: 60px;
  max-width: calc((100% - (12px * 2)) / 3);
  flex-basis: calc((100% - (12px * 2)) / 3);
  background: orange;
  box-shadow: inset 0 0 0 3px black;
  margin-bottom: 12px;
}

<div class="container">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

提前致谢。

Answer 1

这就是你要找的:

.container .block:nth-last-child(-n+3){
    margin-bottom: 0px;
  }