Html 如何在flex容器中设置间隙（水槽）？

我正在尝试创建某种flex容器的通用组件。此组件由一行中的容器及其子容器组成

如果一行中有太多的孩子，那些没有足够空间的孩子就去第二行。它可以很容易地实现与flexbox，但我也希望能够设置元素之间的排水沟。一行的第一个和最后一个元素不应该分别有左边和右边距

我使用负边距技术来实现这一点，但这里的问题是，如果容器太大，右边距可能会引发溢出问题。我可以通过添加

overflow:hidden

来解决这个问题，以切断负边距，但它会引发容器内项目溢出的问题（下拉列表等）

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

• 一行中有多个项目。项目的宽度可以不同
• 如果某些项目没有足够的空间，则转到下一行
• 项目之间存在差距（边距），第一个项目和最后一个项目分别没有左边距和右边距
• 容器内部可以放置溢出内容（下拉列表），因此我不能使用

  overflow:hidden

• 可以使用Css网格和flexbox

以下是我对这个问题的解决方案：

下面是示例中的代码：

.container{
溢出：隐藏；
}
.包装纸{
利润率：-10px；
显示器：flex；
柔性包装：包装；
}
.项目{
flex:0自动；
填充：10px；
背景色：红色；
利润率：10px；
}

项目的宽度可能会有所不同
这个例子有效
但有一个问题
染色覆盖：隐藏
这是不可能的
内容泛滥
比如下拉列表

Flexbox不是您的最佳选择。正如您所描述的，排水沟解决方案既笨拙又低效

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

Grid目前在这方面胜过flexbox，因为Grid接受了gap属性。这些属性在flex中还不可用，但随着浏览器继续实现，将在多个盒子模型（包括flex）中提供

gap

属性

而

边距

和

填充

可用于指定可视间距 在单独的盒子周围，有时更方便在全球范围内 指定给定布局上下文中相邻框之间的间距， 特别是当盒子之间的间距不同于 在第一个/最后一个长方体和容器边缘之间

gap

属性及其

行间距

和

列间距

子属性， 为多列、柔性和网格布局提供此功能

.wrapper{
显示：网格；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
网格自动行：50px；
栅隙：10px；
}
.项目{
填充：10px；
背景色：红色；
}
身体{
保证金：0；
}

项目的宽度可能会有所不同
这个例子有效
但有一个问题
染色覆盖：隐藏
这是不可能的
内容泛滥
比如下拉列表

为了避免滚动条显示，您可以只在左侧和顶部设置负边距

正文{
保证金：0；
}
.集装箱{
宽度：31.7em；
最大宽度：100%；
保证金：自动；；
背景：黄色；
}
.包装纸{
显示器：flex；
柔性包装：包装；
左边距：-10px；
利润上限：-10px；
}
.项目{
flex:0自动；
填充：10px；
背景色：红色；
利润率：10px 0 10px；
}

项目的宽度可能会有所不同
这个例子有效
但有一个问题
染色覆盖：隐藏
这是不可能的
内容泛滥
比如下拉列表

谢谢您的回答！但是css网格有严重的缺陷：使用这种技术，我不能有不同宽度的项目。我的目标是有多个不同宽度的项目（每个项目都有它自己的宽度取决于它的内容）。我可以用css网格实现这一点吗？尝试在

minmax（）

函数中将

1fr

切换到

mincontent

。你有多种选择。这取决于您的具体需求。Firefox现在支持Flex布局中的

gap

：这是一个非常简单的解决方案。你救了我整个世界的痛苦：）谢谢！！