在包装物料行上添加水平线分隔符 [英] Add a horizontal line separator on rows of wrapping items

问题描述

我正在使用CSS flexbox将未知数量的项目放置在行中，并在需要时环绕到其他行。

I'm using css flexbox to place an unknown number of items in rows, wrapping around to additional rows if needed.

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

My question is, is it possible to have a horizontal line between each of the rows?

这是我所拥有的一个简单示例。如果打开代码笔，您将看到项目包装成两行（可能会超过两行；或者只有一行-这取决于元素的确切数量和显示的宽度）。我想在行之间有一条水平线。

Here is a simple example of what I have. If you open the codepen you will see the items wrap into two lines (it could be more than two; or only one - this depends on the exact number of elements and the width of the display). I would like to have a horizontal line between the rows.

<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的精确度-我不知道一种实现此目的的方法。如果不是，请按以下步骤操作：

There is a way to add a horizontal line underneath each row using the "flex-grow" property. However, if you wanted to keep exactly 5px between each item - I don't know of a way to accomplish this. If not, here is how you would do it:

1. 将每个跨度包裹在同一个类的div中。


2. 为您的flexbox容器提供唯一的类/ ID，以便其CSS不会应用于包装div。还要删除其底部边框。


3. 为包装类提供所需的底部边框，进行一些填充，并设置flex-grow：1。


4. 为最后一个flex-item提供一个具有flex-grow的id：1000或其他任意大的数字。

1. Wrap each span in a div with the same class.
2. Give your flexbox container a unique class/ID so its CSS is not applied to the wrapper divs. Also remove its bottom border.
3. Give your wrapper class the bottom-border that you want, some padding, and set flex-grow: 1.
4. Give the last flex-item an id with a flex-grow: 1000 or some other arbitrarily large number.

这里是<这项工作的href = https://jsfiddle.net/chrisgaines47/cvw0oyp0/ rel = nofollow> 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。

If you don't mind the last row being evenly spaced, then you can ignore the part about adding an ID to the last element with a larger flex-grow number.

这篇关于在包装物料行上添加水平线分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！