【问题标题】：Creating a gap using flex使用 flex 创建间隙
【发布时间】：2019-12-20 06:58:22
【问题描述】：

Chrome 上的 flex 中没有浏览器支持这些属性。

column-gap: 20px;
grid-column-gap: 20px;

弹性

但它们在 Chrome 上的网格内工作。

如何使用 flex 创建列间隙？

我想知道复制相同内容的替代方法是什么，以便使用 flex 工作。

有没有办法做到这一点？

【问题讨论】：

标签： css flexbox

【解决方案1】：

我之前所做的是在子级上使用边距，然后在父级上使用负边距：

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

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

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

【讨论】：

【解决方案2】：

从最近（2021 年 1 月）开始，这实际上在 Chrome 中是可能的！这在 Firefox 中已经有一段时间了，但现在 FF、Edge、Chrome 都支持它，希望 Safari 很快就会跟进。

示例代码：

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

这是的简写

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

并且会导致行之间有 20px 的间隙，列之间有 5px 的间隙。

你可以使用：

有关更多信息，请参阅docs of MDN！

【讨论】：

它不适用于我的 Windows 10 + Chrome 90.0.4430；请检查此jsfiddle.net/ugpoj50m 和我在显示器上看到的屏幕截图i2.paste.pics/6003003db81db54de1bc9a4010260e80.png
@MarcoPanichi 我认为它做了它打算做的事情，你的截图是正确的。你没想到的是什么？解释一下：元素的宽度（50px）+间隙的宽度（20px）在三个元素之后留出了10个剩余像素的空间。如果要填满整个容器，可以将 flex-grow 设置为 1。但是；剩下的第 4 个元素也将增长到大于 50px。在这种情况下，您可能想使用 css 网格。我使用您的代码将两者都添加到小提琴中。我希望我理解正确！ codepen.io/ankedsgn/pen/BaWOJZK

【解决方案3】：

Flex 不是这样工作的。如果您想在 flex 中留出空隙，您只有 2 个备选方案：

1。相对差距

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

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

2。固定间隙

使用边距属性来修复容器子项之间的间隙。有时很容易，但有时……可能会很烦人。

.container {
    display: flex;
}

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

【讨论】：

【解决方案4】：

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

justify-content: space-around / space-between 将在弹性盒之间留出空间。

【讨论】：