本文介绍一种基于 flexbox 的纯 css 解决方案，替代 javascript 控制菜单项宽度变化，确保鼠标快速划过时总宽度始终严格保持 100%，过渡平滑、无抖动、无需脚本干预。
本文介绍一种基于 flexbox 的纯 css 解决方案，替代 javascript 控制菜单项宽度变化，确保鼠标快速划过时总宽度始终严格保持 100%，过渡平滑、无抖动、无需脚本干预。
实现一个「悬停放大、其余收缩」的响应式导航菜单，关键挑战在于：宽度动态重分配时的布局稳定性与过渡一致性。原方案使用内联 JavaScript 手动设置每个 <div> 的 width 百分比，存在三大缺陷：
- 多次 onmouseover/onmouseout 触发易导致状态竞争（如鼠标快速掠过时，kr_menue0() 可能未及时恢复所有项宽度）；
- 百分比硬编码（如 "32%" vs "20%"×5 = 100%）存在计算误差风险，实际渲染中因边框、盒模型或浮点舍入可能导致总宽溢出或塌陷；
- float 布局本身不支持弹性宽度协调，transition 在脱离文档流元素上表现不可控。
✅ 推荐解法：CSS Flexbox + flex-basis + transition
Flexbox 天然支持容器内项目的弹性伸缩与空间再分配，flex-basis 定义主轴初始尺寸（等效于“基准宽度”），配合 flex-grow: 0 和 flex-shrink: 1（默认值），可精准控制悬停时单个项目扩张、其余自动收缩，且总和恒为容器宽度——这是 float 或 inline-block 无法保证的核心优势。
✅ 正确实现代码（纯 CSS，零 JS）
<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>
.menues {
display: flex;
justify-content: space-between; /* 均匀分布间距，增强视觉平衡 */
width: 100%; /* 显式声明，避免父容器影响 */
box-sizing: border-box;
}
.menue0 {
flex-basis: 20%; /* 初始宽度：5 项均分 100% */
flex-grow: 0; /* 禁止放大（由 hover 覆盖） */
flex-shrink: 1; /* 允许收缩（关键！） */
border: 1px solid white;
height: 300px;
background-color: grey;
cursor: pointer;
transition: flex-basis 0.5s ease-in-out, background-color 0.3s; /* 仅过渡 flex-basis，更精准 */
box-sizing: border-box;
}
.menue0:hover {
flex-basis: 32%; /* 悬停时扩张至 32%，其余 4 项自动均分剩余 68% → 各约 17% */
}⚠️ 关键注意事项
- flex-basis 是核心：它替代了 width，在 Flex 容器中作为主轴尺寸基准，浏览器会自动按比例重分配剩余空间，彻底规避手动计算误差；
- 必须移除 float 和内联 style.width：float 与 flex 冲突，且内联样式优先级高于 CSS 类，会覆盖 flex-basis；
- justify-content: space-between 建议保留：它在项目间插入等距间隙，使菜单视觉更舒展（若需无缝拼接，改用 justify-content: flex-start 并设 gap: 0）；
- 过渡时间建议 0.3s–0.5s：过长显迟滞，过短（如 0.1s）易造成闪烁；ease-in-out 比 linear 更符合人眼感知；
- 无障碍增强：可追加 :focus-within 或键盘 :focus 样式，支持 Tab 导航。
✅ 效果验证要点
- 快速连续悬停不同菜单项 → 总宽度无跳变，无“抽搐”感；
- 检查 DevTools 中 .menue0 元素的 computed width → 悬停时精确为 32%，非悬停时稳定在 17% 左右（由 Flex 自动计算）；
- 缩放浏览器窗口 → 菜单整体保持 100% 宽度，各项目等比缩放。
此方案以声明式 CSS 替代命令式 JS，大幅提升可维护性、性能与鲁棒性，是现代前端实现动态导航菜单的推荐实践。
