flex-basis优先用0配合flex-grow:1实现安全均分，固定宽项单独设flex: 0 0 120px；css变量需带单位（如20%），修改后需读取offsetheight触发重排；隐藏项用visibility:hidden+height:0+flex-basis:0保持布局稳定。
flex-basis 用百分比还是固定值？
取决于你是否希望导航项宽度随容器动态缩放。flex-basis 设为 20% 时，5 个项刚好占满（不考虑 gap），但加了 padding 或 border 后容易溢出；设为 0 + flex-grow: 1 才真“均分”，且自动容纳内容伸缩。
- 用
flex-basis: 0是安全起点，尤其当导航文字长度不一、需响应式收缩时 - 若某项要固定宽度（如 logo），单独设
flex: 0 0 auto或flex: 0 0 120px，避免它被压缩 -
flex-basis: auto会按内容宽度计算，常导致小屏下换行或横向滚动——这不是 bug，是默认行为
CSS 变量怎么绑定到 flex-basis？
直接在 flex-basis 里用 var(--nav-item-width) 就行，但注意：变量必须是合法长度值（如 25%、160px），不能是纯数字或无单位值。
- 定义：
:root { --nav-item-width: 20%; }，使用：flex-basis: var(--nav-item-width); - 媒体查询中可覆盖变量：
@media (max-width: 768px) { :root { --nav-item-width: 100%; } } - 别写成
--nav-item-width: 20（缺单位），浏览器会静默忽略该声明
为什么改了 CSS 变量，导航栏没重排？
因为 flex-basis 是布局属性，变量更新后浏览器不一定触发重排——尤其是通过 JS 修改 style.setProperty() 后，有时需要强制读取一个布局相关属性（如 offsetHeight）来“触发重排”。
- 常见错误：JS 改完变量立刻调用
element.classList.add("collapsed")，但 class 里的flex-basis没生效 - 稳妥做法：改变量后加一句
element.offsetHeight;，让浏览器同步计算 - 如果用的是
flex: 1简写，记得它会覆盖flex-basis，变量设置可能被吞掉
移动端折叠时，如何让导航项堆叠又不破坏 flex 布局？
别用 display: none 隐藏，那会让元素彻底退出 flex 流；改用 visibility: hidden + height: 0 + overflow: hidden，再配合 flex-basis: 0，保持 flex 容器结构稳定。
- 关键组合：
visibility: hidden; height: 0; flex-basis: 0; margin: 0; padding: 0; - 过渡动画只能作用于
height和opacity，flex-basis不支持过渡——这点容易被忽略 - 如果用了
gap，隐藏项后 gap 仍存在，得用gap: 0覆盖
flex-basis 值变化；而这个变化是否生效，取决于有没有其他 flex 属性（比如 flex 简写）把它覆盖掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
