本文介绍一种无需javascript的纯css解决方案，利用flexbox实现5项菜单的悬停动态缩放——被悬停项扩展至32%，其余自动均分剩余宽度，全程保持容器100%宽度恒定、过渡平滑且无抖动。
本文介绍一种无需javascript的纯css解决方案，利用flexbox实现5项菜单的悬停动态缩放——被悬停项扩展至32%，其余自动均分剩余宽度，全程保持容器100%宽度恒定、过渡平滑且无抖动。
传统基于onmouseover/onmouseout的JavaScript宽度重置方案（如原代码中频繁调用kr_menue()和kr_menue0()）存在明显缺陷：事件触发竞争导致样式状态不一致、快速移入移出时width属性被多次覆盖，引发布局跳变与总宽度短暂失衡（常表现为菜单整体“抽搐”或溢出/收缩）。更关键的是，硬编码百分比（如17% + 32%）无法精确满足5 × 20% = 100%的守恒前提，一旦过渡未完成即触发新状态，误差累积将破坏视觉完整性。
推荐方案：Flexbox + flex-basis + transition
核心思想是将宽度控制权交由Flex容器统一调度，而非手动计算每个子项的绝对百分比：
.menues {
display: flex;
justify-content: space-between; /* 均匀分布，兼顾间距与对齐 */
width: 100%; /* 显式声明，确保父容器占满可用空间 */
box-sizing: border-box;
}
.menue0 {
flex: 1; /* 允许伸缩，配合flex-basis生效 */
flex-basis: 20%; /* 初始基础宽度：5项均分100% */
border: 1px solid white;
height: 300px;
background-color: #888;
cursor: pointer;
transition: flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 推荐缓动函数，比linear更自然 */
text-align: center;
line-height: 300px; /* 垂直居中简易方案 */
font-weight: bold;
color: white;
}
.menue0:hover {
flex-basis: 32%; /* 悬停时扩展至32%，其余4项自动收缩为 (100%−32%)÷4 = 17% */
}对应HTML结构（简洁、语义清晰、无内联事件）：
立即学习“前端免费学习笔记（深入）”；
<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>
✅ 优势解析：
- 宽度恒定：Flex容器天然维持100%总宽，flex-basis变化仅影响分配比例，无像素级累积误差；
- 过渡稳定：CSS transition直接作用于flex-basis，浏览器硬件加速渲染，杜绝JS事件队列延迟导致的卡顿；
- 响应式友好：flex-basis支持%、px、em等单位，搭配flex-grow/flex-shrink可适配不同屏幕；
- 维护性高：删除全部JS逻辑，样式即行为，修改宽度只需调整两处CSS值（20%→32%）。
⚠️ 注意事项：
- 避免在.menue0上同时设置width和flex-basis，后者优先级更高，易引发冲突；
- 若需兼容IE10+，请添加-ms-flex-preferred-size前缀；
- justify-content: space-between会在首尾项外侧留空，若需紧密排列，改用justify-content: flex-start并配合gap: 10px（现代浏览器）或margin微调；
- 悬停项32%的设计需满足：32% + 4 × x% = 100% → x = 17%，确保数学守恒，这是避免抖动的底层保障。
此方案以声明式CSS替代命令式JS，既符合现代前端工程化理念，又从根本上消除了状态竞态问题，是构建高性能交互菜单的优雅实践。
