使用 Flex 创建间隙

Question

Chrome 上的 Flex 内的这些属性\xe2\x80\x99s 没有浏览器支持。

\n\n

column-gap: 20px;\ngrid-column-gap: 20px;\n

柔性

\n\n

\n\n

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

\n\n

\n\n

如何使用 Flex 创建列间隙？

\n\n

我想知道复制相同内容的替代方法是什么，这样它就可以使用 flex 来工作。

\n\n

有没有可能的方法来做到这一点？

\n

Answer 1

从最近（2021 年 1 月）开始，这在 Chrome 中实际上是可能的！一段时间以来，它已经在 Firefox 中实现，但现在从 v14 开始，FF、Edge、Chrome 和 Safari 都支持它。

示例代码：

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

这是简写

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

并将导致行之间有 20px 间隙，列之间有 5px 间隙。

您可以使用：

当然，有关更多信息，请参阅MDN 文档！