如何在换行的 flex 项目之间实现分隔符？

Question

如何在使用 Flex 布局的元素中添加分隔符？

这是我想要添加分隔符的代码示例：

.a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.b {
  background-color: #F6E0E0;
  width: 105px;
  height: 80px;
}

<div class="a">
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
</div>

每个块都应该由分隔符（例如宽度为1像素，高度为50像素，有背景色的 div 标签）与其左右相邻的块分开。但是位于容器右侧的一个块不应该与下一行位于容器左侧的块相分隔。由于包裹是动态的（样式是流体的），我无法在特定位置添加分隔符。

我尝试使用边框或 div，但无法得到正确的结果。我还尝试通过将 justify-content 设置为 space-between，并向分隔符添加 margin-right: -1px 的解决方法，以使右侧的分隔符出了容器，但我需要将 justify-content 设置为 space-around，因此这种解决方案是无效的。

- papillon

---

你需要使用媒体查询来完成这个。 - Paulie_D

到目前为止，您的解决方案似乎与您的描述不符：我在这里看不到分隔符。您能否展示一下您目前的完整实现，以便问题更清晰明了？ - Richard Hunter

@RichardHunter 这不是一个解决方案，而是我想要添加分隔符的代码示例，我的错误在于没有表述清楚。我会更新我的帖子来解释这一点。 - papillon

我猜它应该位于两个块之间的空间中心，无论父容器的宽度如何？您打算使用什么作为分隔符，伪元素还是额外的标签？ - G-Cyrillus

@G-Cyrillus 确切地说，在两个块之间的空间中央。我打算使用分隔符作为图形装饰。它们将看起来像每个元素之间的细灰色垂直条。 - papillon

好的，我制作了一个带有额外标签的演示答案，这样它们就可以在 flex 布局中流动。伪代码将需要平均 JavaScript 计算... - G-Cyrillus

Answer 1

我希望这能满足你的要求。我使用了calc()和css自定义变量，因此您可以插入自己的数字以获得所需的效果。基本上，我使用伪元素创建了分隔符，并将其放在框的左侧。然后我对容器使用负边距来将分隔符移动到最左侧的框之外。最后，一个带有overflow:hidden属性的包装div隐藏了分隔符。

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  --divider: 2px;
  --column-gap: 20px;
  --border: 2px;
  background: pink;
  overflow: hidden;
}

.a {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-start;
  background: lightblue;
  margin-left: calc(var(--column-gap) / -2);
}

.b {
  background-color: #F6E0E0;
  width: 105px;
  border: solid var(--border) black;
  height: 80px;
  text-align: center;
  line-height: 80px;
  color: grey;
  position: relative;
  margin-bottom: 4px;
  margin-left: calc(var(--column-gap) / 2);
  margin-right: calc(var(--column-gap) / 2);
}

.b:after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  display: inline-block;
  width: var(--divider);
  height: 50px;
  background-color: coral;
  transform: translateY(-50%);
  margin-right: calc(((var(--column-gap) - var(--divider)) / 2) + var(--border));
}

   <div class="container">
      <div class="a">
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
         <div class="b">b</div>
       </div>
    </div>

- Richard Hunter

---

看起来不错，但我需要将 justify-content 设为 space-around。 - papillon

Answer 2

您可以在

标签之间使用一个标签来进行样式分隔，并添加负边距，以便使其位于行末的元素显示在容器外。(下面的示例使用了hr，它可以是任何您认为适合使用的标签)

• 将overflow:hidden添加到父级以使其起作用；
• 如果它来自模板，请隐藏最后一个；
• 如果想要随时查看分隔符，则将边距重置为
  ；
• 如果最后一个.b盒子上有hr(或任何您选择的标签)，请同时将右边距重置。

下面是示意图:

.a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* hidding last hr on a row and recenter content*/
  overflow: hidden;  
  border-right:solid 1.5em transparent;
}

.b {
  background-color: #F6E0E0;
  width: 105px;
  height: 80px;
  position: relative;/* put it on top of seperator*/
  margin: 0.5em 1.5em;
}

hr {
  height: 50px;
  margin: auto -20px;
  /* border-reset*/
  border: none;
  border-left: 1px solid lightgray;
}

hr:last-child {/* there is one */
  display: none;
}

.b:nth-last-child(2) {/* harmless if there is no hr in last position   */
  margin-right: 0px;
}

<div class="a">
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
  <div class="b">b</div>
  <hr>
</div>

- G-Cyrillus