如何避免hover导航项时flex布局父容器扩展、其余菜单位移

问题原因 #

不同字重的字体渲染宽度不同，hover时切换为粗体后，.nav__item 元素的宽度会自动增加，触发flex布局重排，最终导致其他导航项位置偏移。

解决方案 #

方案1：固定导航项宽度（最常用、最简单） #

提前给每个导航项分配固定宽度或弹性占比，hover时不会改变元素自身宽度，自然不会触发偏移。
如果导航项数量固定，可以直接按比例分配宽度：

.nav__item {
  font-weight: 100;
  cursor: pointer;
  width: 20%; /* 5个导航项平均分配父级宽度 */
  text-align: center;
}

如果导航项数量不固定，用flex弹性属性固定占比即可：

.nav__item {
  font-weight: 100;
  cursor: pointer;
  flex: 1;
  text-align: center;
}

方案2：用text-shadow模拟粗体效果 #

不用实际修改font-weight属性，通过阴影模拟文字变粗的视觉效果，完全不会改变文字本身的渲染宽度：

.nav__item:hover {
  /* 四个方向的浅阴影模拟粗体，可调整数值控制粗度 */
  text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor, 0 0.3px 0 currentColor, 0 -0.3px 0 currentColor;
}

方案3：伪元素提前占位 #

用隐藏的伪元素提前占好粗体文本需要的宽度，hover时只修改可见文本的字重，元素整体宽度不会变化：

.nav__item {
  font-weight: 100;
  cursor: pointer;
  position: relative;
}
/* 伪元素放入和导航项相同的文本，设为粗体仅占位不显示 */
.nav__item::before {
  content: attr(data-text);
  font-weight: bold;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  display: block;
}

需要同步修改HTML，给每个导航项增加data-text属性存对应文本：

<li class="nav__item" data-text="Home">Home</li>
<li class="nav__item" data-text="About">About</li>
<li class="nav__item" data-text="Contacts">Contacts</li>
<li class="nav__item" data-text="Donate">Donate</li>
<li class="nav__item" data-text="FAQ">FAQ</li>

内容的提问来源于stack exchange，提问作者re1mond