html - 在包装元素的行上添加水平线分隔符

Question

我正在使用 css flexbox 在行中放置未知数量的元素，如果需要则环绕到其他行。

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

Here是我所拥有的一个简单例子。如果你打开 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;
}

Answer 1

有一种方法可以使用“flex-grow”属性在每一行下方添加一条水平线。但是，如果您想在每个元素之间保持恰好 5px - 我不知道有什么方法可以做到这一点。如果没有，请按以下方式操作:

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

这是一个JFiddle这项工作。

这是我使用的代码:

<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 的部分。