我正在参加「掘金·启航计划」

前言

今天掘金web端正式上线了私信功能，迫不及待的去试了下，结果发现表情的排版布局错位。作为一个强迫症患者，这能忍？不行，我得给他改一下。

一、排查问题

从图直观可以看出，是因为存在某些个表情之间没有间隔导致排版布局错位。

审查元素,发现了这一段css代码。

.item:nth-child(8n+8) {
    margin-right: 0px;
}
.cYLuAZ .list .item {
    padding-bottom:10px;
    width:28px;
    margin-right:26px;
}

这行代码的意思是：选择器匹配属于其父元素的第 8n+8 个子元素，且该元素的 class 为 item，将它的 margin-right 设置为 0px。

有经验的小伙伴在看到这段css代码时，就知道这样写的目的其实是为了实现一行8个元素，每个元素之间间隔相同，左右两边没有间距的布局。

由图上可以看到，目前第一行只有 7 个元素，第 8 个元素出现在第二行第一个位置，且表情列表右侧出现滚动条。猜测是因为出现滚动条导致宽度变小，所以最后一个元素被挤到下一行了，移除滚动条看看效果：

可以看出，移除后布局正常。所以，最终得出结论：是因为出现 Y 轴滚动条，导致宽度变小，将每一行最后一个元素挤到下一行导致的排版布局错乱。

最简单粗暴的方法，因为多个滚动条宽度占据了表情容器的宽度的，那表情容器宽度接增加滚动条宽度即可。

由图可以看出，滚动条宽度为17

容器宽度加上17px后布局正常展示。但是这样也有问题，在没有出现滚动条时，右侧会多出一段空白

因为 item 的 width 固定, margin-right 也是固定，所以当一整行的 8 个元素的 width + margin-right 超出容器宽度时，会导致换行。那么我们可以把 margin-right 的值改为动态计算的即可

使用flex布局时，间距是利用 margin-right 实现。改使用 gird 布局，可以固定每列的宽度及总共的列数，然后利用 justify-content: space-between实现左右无间隔，中间间隔等分效果。利用 row-gap实现每行的间距。使用 grid 布局，

{
    display:grid;
}

将容器分为 8 列，每列宽度为表情的宽度 :

{
    display:grid;
    grid-template-columns: repeat(8, 28px);
}

使每列按照 space-between 的方式排列 :

{
    display:grid;
    grid-template-columns: repeat(8, 28px);
    justify-content: space-between;
}

添加每行间距 :

{
    display:grid;
    grid-template-columns: repeat(8, 28px);
    justify-content: space-between;
    row-gap:10px;
}

最后，移除 item 的 padding-top 和 margin-right。

不熟悉 grid 布局的同学，可以参考阮一峰老师的《CSS Grid 网格布局教程》。

overflow有一个属性值overlay，可以使滚动条悬浮而不占据空间

但是悬浮会遮住表情的部分，在本次示例中效果不好。因为是此次新 get 到的知识点，所以记录一下。

各位同学如果还有其他解决方式，欢迎评论区留言！