本文介绍一种纯 css 方案，利用 flexbox 实现五个菜单项在 hover 时平滑扩展、其余项等比收缩的效果，确保整体宽度始终 100% 不变，彻底规避 javascript 控制宽度引发的抖动与非线性过渡问题。
本文介绍一种纯 css 方案，利用 flexbox 实现五个菜单项在 hover 时平滑扩展、其余项等比收缩的效果，确保整体宽度始终 100% 不变，彻底规避 javascript 控制宽度引发的抖动与非线性过渡问题。
传统 JavaScript 动态修改 width 的方式（如频繁调用 getElementById().style.width）存在明显缺陷：当鼠标快速划过多个菜单项时，样式重绘不同步、过渡中断、宽度累加误差导致容器总宽偏离 100%，视觉上出现“闪烁”或“跳动”。根本原因在于：手动设置每个元素的百分比宽度无法保证它们实时总和恒为 100%，且 transition 在多元素并发触发时缺乏协调机制。
更优雅、更可靠的解法是交由 CSS 布局引擎统一调度——使用 display: flex 配合 flex-basis 和 flex-grow/flex-shrink 属性，让浏览器自动计算并分配剩余空间。
✅ 推荐方案：Flexbox + flex-basis + transition
只需两处关键修改：
添加外层容器并启用 Flex 布局
将所有菜单项包裹在拥有display: flex的父容器中（例如.menues），并设置justify-content: space-between或space-around（根据间距需求选择）。用
flex-basis替代width，启用平滑过渡
移除所有内联style.width和 JavaScript 函数；将初始宽度定义为flex-basis: 20%，hover 时设为flex-basis: 32%。配合transition: all 0.5s ease，浏览器会自动按比例压缩其余项，保持总宽恒定。
.menues {
display: flex;
justify-content: space-between; /* 或 space-around / center */
width: 100%;
box-sizing: border-box;
}
.menue0 {
flex-basis: 20%;
flex-shrink: 1;
flex-grow: 0;
border: 1px solid white;
height: 300px;
background-color: #888;
cursor: pointer;
transition: flex-basis 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更自然的缓动 */
text-align: center;
line-height: 300px; /* 垂直居中示例 */
font-weight: bold;
color: white;
}
.menue0:hover {
flex-basis: 32%;
}<div class="menues"> <div class="menue0">Menu 1</div> <div class="menue0">Menu 2</div> <div class="menue0">Menu 3</div> <div class="menue0">Menu 4</div> <div class="menue0">Menu 5</div> </div>
⚠️ 关键注意事项
-
不要混合
width和flex-basis：一旦启用 Flex 布局，width属性会被flex-basis覆盖，应统一使用flex-basis定义基准尺寸。 -
避免
float：原代码中的float: left与 Flexbox 冲突，必须移除。 -
justify-content的选择影响间距：space-between使首尾项贴边、中间均匀分布；若需等距（含首尾间隙），改用space-around。 -
过渡性能优化：优先对
flex-basis单独过渡（而非all），减少重排重绘压力；推荐使用cubic-bezier()替代linear，获得更自然的加速/减速效果。 -
响应式兼容性：该方案天然支持响应式——父容器宽度变化时，Flex 会自动重新分配
flex-basis百分比，无需额外媒体查询。
✅ 效果优势总结
- ✅ 总宽度严格锁定 100%，无抖动、无累积误差
- ✅ 鼠标快速滑过时过渡连贯，无卡顿或回弹
- ✅ 零 JavaScript，加载快、维护简、无障碍友好
- ✅ 支持键盘焦点（
tabindex可选添加）、屏幕阅读器可读
此方案不仅解决了原始问题，更体现了现代 CSS 布局的核心思想：让浏览器做它最擅长的事——布局计算，开发者专注语义与体验设计。
立即学习“前端免费学习笔记（深入）”；
