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

Question

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

如果一行中的孩子太多，没有足够空间的孩子会去第二行。它可以使用 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。因此，我无法在此处放置下拉菜单和其他溢出内容。

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

Answer 1

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

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

在这里查看更多内容

Answer 2

Flexbox 在这里并不是您的最佳选择。正如您所描述的，排水沟解决方案笨拙且低效。

\n\n

CSS 网格可以提供干净、高效的解决方案。

\n\n

Grid目前在该领域胜过 Flexbox，因为 Grid 接受gap属性。这些属性在 Flex 中尚不可用，但随着浏览器继续实现CSS 盒子对齐模块，这些gap属性将在多个盒子模型（包括 Flex）中可用。

\n\n

\n

§ 盒子之间的间隙

\n\n

虽然margin和padding可用于指定各个框周围的视觉间距，但有时全局指定给定布局上下文中相邻框之间的间距更方便，特别是当框之间的间距不同时与第一个/最后一个框和容器 xe2\x80\x99s 边缘之间的\n 相反。

\n\n

该gap属性及其row-gap子column-gap属性\n 为多列、Flex 和网格布局提供此功能。

\n

\n\n

\r\n

\r\n

.wrapper {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n  grid-auto-rows: 50px;\r\n  grid-gap: 10px;\r\n}\r\n\r\n.item {\r\n  padding: 10px;\r\n  background-color: red;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

jsFiddle 演示

\n