从最近（2021年1月）开始，这实际上在Chrome中是可能的！在Firefox中已经有一段时间了，但现在FF，Edge，Chrome和Safari从v14开始支持它。
For currently supported browsers see Caniuse
示例代码：

.flexbox {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    gap: 20px 5px;
 }

这是对

row-gap: 20px;
column-gap: 5px;

并且将导致行之间的20 px间隙和列之间的5 px间隙。
您可以用途：

• 像素值
• 百分比值
• calc（）

欲了解更多信息，请参阅关闭课程的docs of MDN！

我之前所做的是在子节点上使用margin，然后在父节点上使用负margin：

.container-top {
    margin: 0 -20px;
}

.container-top > div {
    margin: 0 20px;
}

JSfiddle
注意：这是一个hack。这可能会超出.container-top的宽度。

Flex不是这样工作的。如果你想在flex中有一个间隙，你只有两个选择：

1.相对差距

CSS3为justify-content属性提供了devs 3个值，可以帮助您对齐对象并在它们之间创建相对的间隙：

• 周围空间：在子节点和子节点的两边之间插入缝隙。
• 间距：仅在其子节点之间插入间隙。
• 间隔均匀：类似于周围空间，但在边缘上提供相等而不是一半大小的空间。

.container {
    display: flex;
    justify-content: /* put it in here */;
}

• 您无法修复间隙，因此它可能会破坏您的布局。特别是在您的容器具有松散宽度或高度的情况下。

2.固定间隙

使用margin属性来修复容器的子容器之间的间隙。有时很容易，但有时......这可能会很烦人。

.container {
    display: flex;
}

.container > * {
    margin: /* top right bottom left | top-bottom right-left | etc. */;
}

• 对于复杂的任务，需要选择器nth-child。
• 这也需要更多的计算。

.container-top {
 display: flex;
 justify-content: space-around;
}

justify-content：space-around / space-between将在flex-box之间形成空间。