使用 Gap 属性给 CSS Flex 布局设置间距

大家好，我是寻找安多芬。

众所周知，Flex 弹性盒子布局已经够流弊了，CSS Grid 网格布局比 Flex 弹性盒子布局还要强大，下面列举一些 Flex 不具备的优点：

1. 可以指定单元格在网格容器里的具体位置。

2. 可以使用 gap 属性设置单元格间指定的间距。Flex 以前是没有的

3. 可以跨行跨列设置单元格。

4. 可以互相重叠，通过设置 z-index 属性控制单元格层级。欲与绝对定位试比高

5. 可以随意摆放某一个单元格在容器中的位置，不按顺序来也行。

Grid 布局唯一缺点：就是生出来比较晚，比 Flex 兼容性差点，需要更高版本的浏览器支持。

详细教程我在这里就不赘述了，可以阅读阮一峰 -- CSS Grid 网格布局教程 里面有非常详细的指南和示例。

关于 CSS 排版布局，我有如下建议：

1. 如果你还在使用传统布局（Float，Position），建议你开始尝试 Flex 布局。

2. 如果你已经用过 Flex 布局，建议你开始使用 Grid 布局。

3. 还有一种叫做多列布局，也可以了解下，扩展下知识广度。

4. 总之，推荐优先级：Grid > Flex > Float & Position。

以前在 Flex 布局中是很难设置 item 间距的，只能够通过 justify-content 来设置，但是也只能模糊设置，并不能指定具体值，如果要指定具体值还是得用 margin。

justify-content: space-around | space-between | space-evenly;

现在最新的 CSS 规范中，gap 属性也可以用在 Flex 布局里边了。但是对旧版浏览器兼容比 Grid 还不够友好。

兼容性

结语

上面是 gap 在 Flex 和 Grid 布局中的兼容性，大家可以根据自己的需求，自行确定要使用哪种布局方式，但我的建议是开始在项目中尝试新技术。