如何在柔性容器中设置间隙（排水沟）？

我正在尝试创建某种柔性容器的通用组件。该组件由容器及其连续的子组件组成。

如果一行中的孩子太多，没有足够空间的孩子会去第二行。它可以使用 Flexbox 轻松实现，但我也希望能够在元素之间设置装订线。一行的第一个和最后一个元素不应分别具有左边距和右边距。

我使用负边距技术来做到这一点，但这里的问题是，如果容器太大，右边距可能会引发溢出问题。我可以解决这个问题添加overflow: hidden切断负边距，但它会引发容器内项目溢出的问题（下拉菜单等）。

所以现在我正在寻找银弹，可以满足这个要求的实现：

• 连续有多个项目。项目的宽度可以不同。
• 如果某些项目没有足够的空间，则会转到下一行。
• 项目之间有间隙（边距），第一个和最后一个项目分别没有左边距和右边距。
• 容器内部可以放置溢出的内容（下拉菜单），所以我无法使用overflow: hidden
• 可以使用CSS grid和flexbox

这是我对这个问题的解决方案：https://jsbin.com/gabumax https://jsbin.com/gabumax

这里是示例中的代码：

.container {
  overflow: hidden;
}

.wrapper {
  margin: -10px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 0 auto;
  padding: 10px;
  background-color: red;
  margin: 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="item">Width of items can vary</div>
    <div class="item">This example works</div>
    <div class="item">But there is a problem</div>
    <div class="item">Dye to overlow:hidden</div>
    <div class="item">It is impossible to place here</div>
    <div class="item">Overflowing content</div>
    <div class="item">Such as dropdowns</div>
  </div>
</div>

它有效，但唯一的缺点是overlow: hidden。因此，我无法在此处放置下拉菜单和其他溢出内容。

有更好的解决办法吗？提前致谢。

Use gap / row-gap / column-gap:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

查看更多here https://css-tricks.com/snippets/css/a-guide-to-flexbox/#gap-row-gap-column-gap