如何用 CSS Flexbox 实现稳定响应的五项自适应导航菜单-js教程-PHP中文网

如何用 CSS Flexbox 实现稳定响应的五项自适应导航菜单

本文介绍一种纯 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`

只需两处关键修改：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

添加外层容器并启用 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 百分比，无需额外媒体查询。