直接设flex: 1会导致小屏下换行错乱，因其等价于flex: 1 1 0%，flex-shrink: 1允许压缩，文字长的项被压窄而触发换行；应改用flex: 0 0 auto配合min-width保障可读性与点击面积。
flex: 1 不是万能解，尤其当导航项文字长度差异大时，容易导致换行错乱或点击区域不均——等宽排列的核心不是“强行拉伸”，而是“控制最小可用空间 + 防止压缩”。
为什么直接设 flex: 1 会让导航项在小屏下挤成一团
默认情况下，flex: 1 等价于 flex: 1 1 0%，其中第二个值 flex-shrink: 1 允许子项被压缩。一旦容器宽度不足（比如手机横屏或窄浏览器窗口），文字稍长的项就会被硬压窄，触发换行，甚至文字截断。
- 用
flex: 0 0 auto替代flex: 1：禁止收缩，保留内容自然宽度 - 配合
min-width: 120px（或根据文字量调整）确保可读性与点击面积 - 若真需“视觉等宽”，优先用
flex-basis: 20%+flex-shrink: 0，而非依赖flex: 1 - 别忘了设
flex-wrap: nowrap（虽是默认值，但显式声明可防 CSS 重置干扰）
nav ul 和 nav 哪层该设 display: flex
推荐直接对 nav 设 display: flex，而不是只给内部 ul。原因很实际：
-
nav是语义容器，也是响应式切换的最小单位；小屏下你很可能要整块收起/展开，而非只动ul> - 如果
nav里除了ul还有 logoimg或搜索框form，只有nav层 flex 才能统一调度 - 设在
ul上会导致li成为 flex 项，但li默认带list-style和内外边距，清理成本高；而直接把a或div作为nav的直系子项，结构更扁平、样式更可控 - 若坚持用
ul，务必加list-style: none; margin: 0; padding: 0;，否则 Safari 可能渲染出不可见的圆点占位
等宽 + 下拉菜单混合时怎么避免宽度崩坏
下拉按钮（button 或带 class="dropdown" 的 div）和普通 a 标签混排时，flex 容易因盒模型差异（如 button 默认有边框/内边距）导致宽度不一致。
- 所有导航项（无论
a、button还是div）必须包裹在同一层级，例如统一用 - 对
.nav-item设flex: 0 0 auto; min-width: 120px;，再统一控制内部元素的padding和text-align - 下拉菜单的触发区（如
button）不要设固定width，改用width: 100%+box-sizing: border-box，让它完全填满父.nav-item - 避免给
button加margin调间距——用gap或父级padding控制，否则不同浏览器对button的默认 margin 处理不一致
移动端折叠后，等宽逻辑要不要保留
不要。小屏下还维持“等宽”是反模式——屏幕宽度有限，强行均分只会让每项只剩 30px，文字全挤成“…”。
- 在
@media (max-width: 768px)中，把nav改为flex-direction: column，并移除所有min-width和flex-basis - 用
gap: 8px替代margin-bottom控制垂直间距，更干净 - 如果用了汉堡菜单，确保
input[type="checkbox"]的id和对应label[for]严格匹配，iOS Safari 对 focus 事件敏感，错一个字符就点不开 - 折叠状态下的
nav推荐用height: 0; overflow: hidden;配合transition: height 0.3s ease，比display: none更利于动画和可访问性
真正难的不是写出等宽效果，而是判断什么时候不该等宽——比如用户扫一眼就该知道“登录”在最右，“首页”在最左，而不是靠像素对齐来猜位置。视觉权重、信息密度、触控目标尺寸，这些比“数学上等宽”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
