除了CSS中的外部边框外，如何为动态填充的内容添加边框？

Question

我正在尝试创建一个网格系统，其中内容将动态填充，因此我不知道创建时元素的确切数量。到目前为止，每个元素都被添加到一个flexbox容器中，每个容器中包含3个元素。如果有超过3个元素，则下一个元素将转到下一行，依此类推。据说我要做的是在每个元素周围添加边框减去外部元素。所以它看起来像这样。

__|__|__
__|__|__
  |  |

我遇到的问题是我一直在为每个元素添加一个底部边框和一个右边框，然后使用nth-child（3n）为每个第三个孩子添加一个0的边框。但是这并没有解决底行底部边框的问题，它看起来像这样对我来说：

__|__|__
__|__|__
__|__|__

我不确定最好的方法来定位底部边框并将其删除，因为因为内容是动态填充的，所以我不知道底部行的元素的确切数量，因为它可能是1,2或3元素。那么获得我正在寻找的结果的最佳方法是什么？是否可以单独使用CSS或者我需要javascript来执行此操作？这是我目前使用的代码：

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

.flexElement {
        width: 33.33%;
        border-right: solid 2px #e1e1e1;
        border-bottom: solid 2px #e1e1e1;

        &:nth-child(3n), &:last-child {
         border-right: none;
    }
}

Answer 1

我建议将边框添加到顶部并排除前三个元素。

解

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

.flexElement {
  width: 33.33%;
  border-right: solid 2px #e1e1e1;

  // Styles start on the 4th child
  &:nth-child(n+4) {
    border-top: solid 2px #e1e1e1;
  }

  &:nth-child(3n), &:last-child {
    border-right: none;
  }
}

见JSFiddle