在包装物品的行上添加水平线分隔符

我使用 css flexbox 在行中放置未知数量的项目，如果需要，可以环绕到其他行。

我的问题是，每行之间是否可以有一条水平线？

Here http://codepen.io/anon/pen/jbQpvP这是我所拥有的一个简单的例子。如果打开 codepen，您将看到项目换行成两行（可能多于两行；或只有一行 - 这取决于元素的确切数量和显示的宽度）。我想在行之间有一条水平线。

<div>
    <span>First item</span>
    <span>Second item</span>
    <span>Third item</span>
    <span>Fourth item</span>
    <span>Fifth item</span>
    <span>Sixth item</span>
</div>

使用以下 CSS：

div {
  border: 1px solid black;
  width:20%;
  display: flex;
  flex-flow: row wrap;
}

span {
  border: 1px solid blue;
  margin: 5px;
}

有一种方法可以使用“flex-grow”属性在每行下方添加一条水平线。然而，如果你想在每个项目之间保持 5px 的距离 - 我不知道有什么方法可以实现这一点。如果没有，您可以这样做：

1. 将每个跨度包装在具有相同类的 div 中。
2. 为您的 Flexbox 容器提供唯一的类/ID，以便其 CSS 不会应用于包装器 div。同时删除其底部边框。
3. 为你的包装类提供你想要的底部边框、一些填充，并设置 flex-grow: 1。
4. 为最后一个 Flex-item 指定一个带有 flex-grow: 1000 或其他任意大数字的 id。

这里有一个JFiddle https://jsfiddle.net/chrisgaines47/cvw0oyp0/这项工作的。

这是我使用的代码：

<style>
div.flexbox {
 border-left: 1px solid black;
 border-top: 1px solid black;
 border-right: 1px solid black;
 width:50%;
 display: flex;
 flex-flow: row wrap;
 align-items: stretch;
}       
span {
 border: 1px solid blue;
 margin: 5px;
}      
.wrap {
 border-bottom: 1px solid black;
 padding: 5px;
 flex-grow: 1;
}
#last {
 flex-grow: 1000;
}
</style>
<div class="flexbox">
  <div class="wrap"><span>First item</span></div>
  <div class="wrap"><span>Second item</span></div>
  <div class="wrap"><span>Third item</span></div>
  <div class="wrap"><span>Fourth item</span></div>
  <div class="wrap"><span>Fifth item</span></div>
  <div class="wrap"><span>Sixth item</span></div>
  <div class="wrap"><span>Seventh item</span></div>
  <div class="wrap"><span>Eigth item</span></div>
  <div class="wrap"><span>Nineth item</span></div>
  <div class="wrap"><span>tenth item</span></div>
  <div id="last" class="wrap"><span>Eleventh item</span></div>
</div>

如果您不介意最后一行均匀分布，那么您可以忽略向具有较大 flex-grow 数字的最后一个元素添加 ID 的部分。