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 - 我不知道如何实现这一目标。如果没有，请按以下步骤操作：

将每个范围换成同一类的div。
为您的Flexbox容器提供唯一的类/ ID，以便其CSS不应用于包装器div。同时删除其底部边框。
为你的包装类提供你想要的底部边框，一些填充和设置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>

如果您不介意最后一行是均匀间隔的，那么您可以忽略有关将ID添加到具有更大弹性增长数的最后一个元素的部分。

在包装项行上添加水平线分隔符

1 个答案: