flex子项width无效因被flex-basis覆盖且默认min-width:auto撑开内容；需设min-width:0+flex-shrink:1，用flex-basis过渡实现悬停展开收缩。
直接用 flex-basis + :hover 控制单个子项宽度，其余项自动收缩——但必须配合 flex-shrink 和 min-width: 0，否则文字撑开、收缩失效。
为什么 width + transition 在 flex 布局里不管用
flex 子项默认有最小内容宽度（min-width: auto），即使你设 width: 0 或 flex-basis: 0，文字仍会强制撑开容器，导致悬停时“展开不明显”或“收缩不到位”。浏览器优先保障内容可读性，不是优先执行你的 width 值。
-
width属性在 flex 容器中会被flex-basis覆盖，直接写无效 - 不设
min-width: 0，子项不会缩到比文字更窄 -
flex-shrink: 1必须显式开启（默认是 1，但某些重置样式可能覆盖）
flex-basis 悬停切换的正确写法
核心是让被悬停项“抢空间”，其他项靠 flex-shrink 主动让出剩余宽度。父容器用 justify-content: space-between 或 flex-start 都行，但别用 space-around ——它会干扰 flex-basis 的实际分配逻辑。
- 所有子项统一设
flex: 1 1 var(--base-width)，其中flex-shrink: 1确保可压缩 - 悬停项单独加
flex-basis: 32%（或具体像素值），其他项自动按比例收缩 - 必须给子项加
min-width: 0，否则文字撑开后flex-basis形同虚设 - 过渡只写
flex-basis，不要加width或flex-grow，避免冲突
.menues { display: flex; width: 100%; }
.menue0 {
flex: 1 1 20%;
min-width: 0;
transition: flex-basis 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.menue0:hover {
flex-basis: 32%;
}
移动端悬停失效？换用 focus-within 或 JS 切换类
手机端没有稳定 :hover，:focus-within 是纯 CSS 替代方案，但要求子元素能获得焦点（比如里面有 <a> 或 tabindex="0"）；否则只能靠 JS 切换类名，例如监听点击后加 .is-expanded。
立即学习“前端免费学习笔记（深入）”；
-
:focus-within需要子元素可聚焦，否则不触发 - 用
tabindex="0"给子项加焦点能力，但会改变 tab 顺序，需测试可访问性 - JS 方案更可控：监听 click 后
element.classList.toggle('is-expanded')，CSS 写.menue0.is-expanded替代:hover - 别用
display: none配合 transition——它不触发任何过渡动画
最易忽略的是 min-width: 0 和 flex-shrink 的组合效果：没它，悬停再怎么写 flex-basis，其他项也缩不动；写了它，才能真正实现“一展众缩”的弹性响应。
