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

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 - 我不知道有什么方法可以做到这一点。如果没有，请按以下步骤操作：

用相同的 class.
为您的 flexbox 容器提供一个唯一的 class/ID，这样它的 CSS 就不会应用于包装器 div。同时删除它的底部边框。
给你的包装器 class 你想要的底部边框，一些填充，并设置 flex-grow: 1.
给最后一个 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 的部分。

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

Add a horizontal line separator on rows of wrapping items

html

css

flexbox