在 Flex 布局中使用 gap 属性
此文章更新于 1310 天前，其中的信息可能已经有所发展或是发生改变，请自行斟酌确认。最近在更新博客的样式，突然想到现在的flex布局已经可以定义间距了，所以大概整理了一下关于gap这个新属性资料。
gap属性是用来设置网格行与列之间的间隙（gutters），该属性是row-gap与column-gap的简写形式。
起初是在 Grid 布局中用 grid-gap 来设置行间距和列间距的，后来意识到 Multi-column 布局中有一个 column-gap 属性，同时存在 grid-column-gap 和 column-gap 对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中，并没有一个很好的方法来设置行间距和列间距。
于是CSS齐属属性规范开始调整，gap 代替了grid-gap 属性，并且规范对间隙属性进行了大统一，三种布局只需要使用 gap 属性就可以设置间距样式了。
我一直觉得 Grid 布局的属性太多，而且早期的兼容性很差，相对于 Flex 布局 我觉得最好用的属性就是 grid-gap，因为 flex 只有 5 种对齐属性，如果需要做间距的话就很麻烦，只能使用 margin。
今年年初的时候一大波的公众号在推送 flex 已经可以使用 gap 属性了，正好趁着这段时间博客主题改版，正好有用上。