hover修改字体粗细时布局偏移问题排查及解决（保留display:flex）

问题原因 #

外层div是flex容器，而nav作为它的子元素，默认未设置宽度或flex相关属性，因此nav的宽度会自适应内部grid内容的宽度。当hover“Three”时，字体变粗（font-weight:900）导致该<a>元素宽度增加，进而撑大整个nav的宽度——由于flex容器内的nav是自适应宽度的，最终引发布局偏移。其他元素hover时宽度变化幅度较小，因此未出现明显偏移。

解决方法 #

无需移除外层div的display:flex属性，只需让nav在flex容器中占满全部可用宽度，即可让grid四列平分容器宽度，hover时元素宽度变化不会影响整体布局。以下是几种可行方案：

• 方案一：给nav添加flex: 1
  让nav自动填充flex容器的可用空间：

  nav {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    font: 120% system-ui;
    text-align: center;
    padding: 2rem 1rem;
    flex: 1; /* 新增属性 */
  }
  

• 方案二：给nav设置width: 100%
  强制nav占满容器宽度：

  nav {
    /* 原有样式保持不变 */
    width: 100%; /* 新增属性 */
  }
  

• 方案三：给nav设置flex-basis: 100%
  指定nav的基准宽度为容器的100%：

  nav {
    /* 原有样式保持不变 */
    flex-basis: 100%; /* 新增属性 */
  }
  

补充：也可以给每个<a>元素设置固定宽度，但这种方式灵活性较差，不如上述方案通用。

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