在换行项的行上添加水平分隔符

Question

我正在使用CSS Flexbox将未知数量的项目排列成行，并在需要时换行到其他行。

我的问题是，是否可能在每行之间放置一条水平线？

这里是一个简单的示例。如果您打开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;
}

- Asher

---

你能分享一些代码吗？ - Tiago César Oliveira

@TiagoCésarOliveira 请查看已编辑的问题。 - Asher

你想要的是将整行包裹起来，而不是仅限于 span 元素？你说的是被两行包裹的元素，这样你就是在谈论 span 和 div 的边框，对吗？ - arussell

@AlbertoRussell 不行。使用flexbox属性，span元素将填充第一行，当该行没有更多空间时，它们将换到下一行，并一直这样做，直到所有元素都被放置。我希望每次开始新的一行span时都有一条水平线。 - Asher

我猜你可以使用一些JavaScript来循环遍历这些span元素，将它们的宽度相加，然后判断是否大于容器的宽度。如果大于容器的宽度，那么它就会换行到新的一行，因此需要绘制一条线（添加一个<hr>元素？）。 - r8n5n

Answer 1

有一种方法可以使用“flex-grow”属性在每行下方添加水平线。但是，如果您想保持每个项目之间恰好5像素的距离-我不知道如何实现。如果没有这样的要求，请按照以下步骤操作：

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

- Chris G

---

谢谢！非常好用！ - Asher