html - flex 容器 css 的行线

Question

仅限纯 css!!

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

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

有什么方法可以让容器中的最后一个元素显示该行直到行尾，而不增加其宽度？

或者任何其他处理这个问题的想法？

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

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;
}

演示 fiddle :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;
}

Fiddle