Flex容器CSS的行线

Question

只有纯CSS！！

我有一个div用作带有换行的弹性容器的元素，其中包含显示在 4 列中的元素。我需要显示该容器内的行之间的线。

我border-bottom为内部的每个 Flex 元素设置了属性，但这使得最后一行的行采用与该行中的元素一样多的元素。

有没有办法让容器中的最后一个元素显示该行直到行尾，而不使其宽度增加？

或者还有其他想法来处理这个问题吗？

注意：容器中的元素数量是动态的，所以我不知道最后一行有多少个元素。

html

<div id="container">
 <div class="element">
  <div class="content">
  </div>
 </div>
 <div class="element">
  <div class="content">
  </div>
 </div>
 ....
</div>

CSS

#container {
  display: flex;
  flex-wrap: wrap;
}

.element {
  flex: 0 0 25%;
  border-bottom: 1px solid green;
}

.content {
 margin: 10px;
 border: 3px solid green;
 background-color: yellow;
 height: 30px;
}

演示小提琴：https://jsfiddle.net/sfhLw1dh/

谢谢你！

Answer 1

无论你说什么，都有一种技巧或技巧：

给border-bottom: 1px solid green;和#container给。margin-bottom: -1px;​.element

#container {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid green;
}

.element {
  flex: 0 0 25%;
  border-bottom: 1px solid green;
  margin-bottom: -1px;
}

小提琴