flexbox容器内调整单个元素字号时如何保持其余元素位置不动？

修复方案 #

问题核心是修改font-size会改变元素在文档流中占据的实际尺寸，触发flex布局重新计算，导致相邻元素移位，以下两种方案都可以保留flex原有的响应式特性：

方案1（推荐，实现成本最低）

用transform: scale()替代修改font-size，transform操作不会改变元素在文档流中占用的原始空间，完全不会触发布局重排：

.navbar-text a {
  text-decoration: none;
  color: white;
  transition: 100ms ease;
  /* 新增：transform对行内元素不生效，转成行内块 */
  display: inline-block;
  /* 新增：设置缩放中心为元素正中，放大效果更自然 */
  transform-origin: center;
}

.index-navbar-text a:hover {
  color: #0d1321;
  /* 删掉原有的font-size:32px配置，替换为scale，32/24≈1.33，和原来的放大比例完全一致 */
  transform: scale(1.33);
}

方案2（如果必须修改font-size实现效果）

给文本容器提前预留足够的宽高空间，避免字号变大时撑开容器：

.navbar-text {
  font-size: 24px;
  margin: auto;
  /* 新增：提前设置最小宽度，覆盖字号变大后的最大宽度，可根据实际字体调整数值 */
  min-width: 120px;
  /* 新增：设置行高为最大字号的高度，避免高度变化 */
  line-height: 32px;
  /* 新增：文字居中对齐 */
  text-align: center;
}

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