2020年11月12日15:18:24 https://segmentfault.com/a/1190000037493676 你现在可以玩下这 5 个 CSS 新功能

长期以来，在 felx 布局中的行或列之间添加间隙一直是一个难题。 通常可以通过在 flex 项目中添加 margin 来解决问题，但是margin的问题在于，它们也会被添加到每个行或列的开头和结尾。 即使可以通过 CSS 来解决这些缺陷，但这也不是最理想的解决方案。

目前，浏览器对flexbox gap 的支持越来越好。 gap，row-gap 和column-gap 属性存在于不同的上下文中，具有不同级别的浏览器支持。

我们可以在以下布局模块中使用gap属性。

声明 display: flex; 的模块

声明 display: grid; 的模块

多列布局，由column-count或column-width属性定义

Edge 84+，Firefox 63+，Chrome 84+和Opera 70+当前支持 gap属性。 Internet Explorer 和 Safari 目前还不支持它。