Flexbox导航栏宽度动画问题：SVG图标偏移的原因与解决

问题描述 #

我想要实现导航栏宽度动画效果：鼠标悬停时导航栏展开宽度，仅让nav-title__text文本区域扩展，SVG图标保持原有尺寸。但动画过程中SVG图标出现轻微左移现象，相关代码如下：

原CSS代码 #

:root {
  font-family: sans-serif;
}

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}

nav {
  height: 100%;
  background-color: #23232e;
  width: 4rem;
  transition: width 1s ease-in;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}

nav:hover {
  width: 10rem;
  color: white;
}

.nav-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
}

.nav-title>svg {
  height: 2rem;
  flex-grow: 0;
}

.nav-title__text {
  flex-grow: 0;
  overflow: hidden;
  width: 0;
}

nav:hover .nav-title__text {
  width: fit-content;
}

原HTML代码 #

<nav>
  <div class="nav-title">
    <svg width="80" height="80" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff69b4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
      <path d="M1.75 11 8 14.25 14.25 11M1.75 8 8 11.25 14.25 8M8 1.75 1.75 5 8 8.25 14.25 5z" /></svg>
    <div class="nav-title__text">
      Title
    </div>
  </div>

</nav>

成因分析 #

• SVG图标未设置固定CSS宽度：虽然SVG标签里有width="80"属性，但CSS中仅定义了height:2rem，未指定宽度。当nav宽度动画时，flex容器的可用空间变化，浏览器会重新计算SVG的宽度（基于 viewBox 缩放），导致其位置临时偏移。
• 文本区域宽度变化无过渡：nav-title__text从width:0瞬间变为width:fit-content，和nav的1s宽度动画不同步，触发的布局重排会干扰SVG的位置稳定性。

解决方法 #

1. 给SVG添加固定CSS宽度，结合flex-shrink:0确保其尺寸完全固定，不受容器布局影响。
2. 给nav-title__text添加宽度过渡动画，使其和nav的动画节奏保持一致，避免瞬间布局变化。
3. 给nav-title设置gap属性，固定图标和文本的间距，增强布局稳定性。

修改后的CSS代码 #

:root {
  font-family: sans-serif;
}

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}

nav {
  height: 100%;
  background-color: #23232e;
  width: 4rem;
  transition: width 1s ease-in;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

nav:hover {
  width: 10rem;
  color: white;
}

.nav-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
  gap: 0.5rem; /* 固定图标与文本间距 */
}

.nav-title>svg {
  height: 2rem;
  width: 2rem; /* 固定宽度，和高度匹配 */
  flex-grow: 0;
  flex-shrink: 0; /* 禁止缩小 */
}

.nav-title__text {
  flex-grow: 0;
  overflow: hidden;
  width: 0;
  white-space: nowrap; /* 防止文本换行 */
  transition: width 1s ease-in; /* 添加同步过渡 */
}

nav:hover .nav-title__text {
  width: fit-content;
}

修改说明 #

• 给SVG设置width:2rem和flex-shrink:0，彻底固定其尺寸，避免布局变化时的重计算。
• 给nav-title__text添加transition: width 1s ease-in，使其宽度变化和nav的动画同步。
• 添加white-space: nowrap防止文本换行，保证fit-content计算准确。
• 给nav-title设置gap，固定图标和文本的间距，提升布局稳定性。

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