我要不要用弹性布局的`gap`属性？

上班时我坚决不用，下班之后全都要用！

今天看到群里的LSP吐槽了一下flex的gap属性，他的原话是这样说的：

LSP： "嗝屁了这么差的。"

掏粪工：“不是还可以啊”

LSP：“灾难。”

群友的对话成功吸引到了我的注意，于是我看了看群里发的图，思考了标题这个问题：“我要不要用弹性布局的gap属性？”

过程

在讨论要不要用之前，我们先来看看什么是gap属性：

The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts.

简而言之，就是弹性布局中子项主轴和交叉轴之间的空隙值。

举个例子gap | CSS-Tricks - CSS-Tricks：


/* Grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr 1fr;
  gap: 30px 20px;
}

/* Flex layout */
.container {
  display: flex;
  gap: 10%;
}

/* Multi-column layout */
.container {
  column-count: 5;
  gap: 20px;
}

解释这个属性不是我想表达的重点，你可以在网上找到无数的解释，让我们回过头来说一说到底该不该用。

首先，来看看兼容性：

先不管死掉的IE(如果你们的产品要兼容就当我没说)，其他浏览器的兼容性还是可以的，Chrome 57的发布时间是2017-03-09，Edge 16则是2017-10-17，其他几家也都是2017年跟进的，算起来也是很多年前的事情了，是吗？

别废话，都2023年了，还不升级六年前版本浏览器的用户不配当我们的产品的用户！

那我们是不是可以直接一把梭用gap？

注意看这个数据：China: 53.83%! 这就意味着，中国所有浏览器中，仅仅有53.83%使用份额的浏览器得到完全支持或部分支持。

看到这个数据，我立马想起自己在项目里大量使用了gap来创建元素之间的间隙样式，而我们的产品又面向了比较多的老用户。。。

于是：

最后

当你需要考虑产品用户设备兼容性时，你最好不要用。

当你需要考虑所有用户设备兼容性时却能接受老大突然在下班时间让你修复某个用户因这个属性导致的页面布局异常时，你可以爱怎么用就怎么用。

当你在开发自己的项目，亦或是学习一些新知识时，这个属性还是非常方便的，这时候我就可以很硬气地说不升级浏览器版本的用户不配当我的用户。

另外，相对于margin属性来实现相同的效果来说，其大大减少了代码量，并且对国际化的支持也非常棒。

题外话，如果你需要考虑国际化，你可能会因为margin问题导致某些国家从右到左的阅读方向导致的布局效果而加班😂。

这个属性就水到这里，其他的下次再说。

过程

最后

Friends