如何在包裹的弹性项目之间实现分隔符？

Question

如何在包裹的弹性项目之间实现分隔符？

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

.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 并向分隔符添加 -1px 的 margin-right ，以便右侧的内容脱离容器，但我需要将 justify-content 设置为周围有空间，因此该解决方案无效。

Answer 1

我希望这和你一样。我使用了 calc() 和 css 自定义变量，因此您可以插入自己的数字以获得您想要的效果。本质上，我使用伪元素创建了分隔符并将其放在框的左侧。然后，我在容器上使用负边距来将分隔线移动到容器外部最左边的盒子上。最后，一个包裹 div 隐藏了overflow:hidden分隔线。

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>

Answer 2

您可以使用

• 您的 div 之间的标签样式类似于分隔符并
  添加负边距，因此行末尾的标签将位于容器之外。（hr以下为演示，可以是您认为合适的任何一个）
• 添加overflow:hidden到父级以使其工作；
• 如果它来自模板，则隐藏最后一个。
• 如果您想随时查看分隔符，请重置 div 的边距
• .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>