html中加分隔符,html – 在包装项行上添加水平线分隔符

有一种方法可以使用“flex-grow”属性在每行下面添加一条水平线.但是,如果你想在每个项目之间保持5px – 我不知道如何实现这一目标.如果没有,请按以下步骤操作：

>用同一个类包装div中的每个跨度.

>为您的FlexBox容器提供唯一的类/ ID,以使其CSS不应用于包装器div.同时删除其底部边框.

>为你的包装类提供你想要的底部边框,一些填充,并设置flex-grow：1.

>为最后一个flex-item指定一个带有flex-grow：1000或其他任意大数字的id.

这是一个JFiddle的工作.

这是我使用的代码：

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;

}

First item

Second item

Third item

Fourth item

Fifth item

Sixth item

Seventh item

Eigth item

Nineth item

tenth item

Eleventh item

如果您不介意最后一行是均匀间隔的,那么您可以忽略有关向具有较大flex-grow数的最后一个元素添加ID的部分.