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

Question

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

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

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

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

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

这是我对这个问题的解决方案： 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 。因此，我无法在此处放置下拉菜单和其他溢出的内容。

有更好的解决方案吗？提前致谢。

原文由 Tilonorrinco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 gap / row-gap / column-gap ：

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

在这里 查看更多

原文由 zendka 发布，翻译遵循 CC BY-SA 4.0 许可协议