flex布局中nav不换行导致宽度计算错误，主因是flex-wrap: nowrap与盒模型冲突；应设flex-wrap: wrap、box-sizing: border-box，并用flex-basis替代width控制尺寸。
flex布局里nav元素不换行，宽度算不准
Flex容器默认用flex-wrap: nowrap，子项会强行挤在一行，哪怕内容超宽。这时候width设成100%也没用——父容器没撑开，子项又不肯折，结果就是横向滚动或文字溢出。
实操建议：
- 给导航容器加
flex-wrap: wrap，允许菜单项在小屏下换行 - 每个菜单项（如
<li>或<a></a>）设flex: 0 0 auto，避免被压缩变形 - 如果要等宽分布（比如5个菜单平分宽度），改用
flex: 1 1 0，配合min-width防过窄 - 别依赖
width: 20%这种固定值，flex的分配逻辑和盒模型宽度是两套系统，混用容易冲突
移动端点击区域太小，触摸体验差
PC端靠padding撑开点击区没问题，但移动端手指点不准，padding: 8px实际可能只有24px高，远低于推荐的44px最小触控尺寸。
实操建议：
- 用
min-height: 44px强制保底高度，再配line-height居中文字 - 把
padding写成padding: 12px 16px，上下留足空间，左右兼顾视觉节奏 - 别只给
<a></a>加样式，要确保整个<li>或<button></button>可点，否则iOS Safari会忽略非可点击标签的触控 - 检查
box-sizing是否为border-box，否则padding会额外增加总宽，flex计算时容易错位
@media断点和flex属性冲突导致布局断裂
常见错误是：在@media (max-width: 768px)里突然把display: flex改成block，但忘了重置flex-direction、justify-content这些遗留属性，结果小屏下盒子还按flex逻辑跑，却没容器兜底。
实操建议：
- 断点内优先用
flex-direction: column替代直接切display，保持盒模型一致性 - 所有flex相关属性（
flex、align-items、justify-content）都放在同一套媒体查询里声明，别分散在不同规则块 - 用
flex-basis代替width控制子项基础尺寸，它在flex上下文中更可靠 - 测试时关掉浏览器缩放，Chrome DevTools的设备模拟器有时会误报
width，真实手机上viewport设置不对也会让断点失效
盒模型里的border/padding干扰flex宽度分配
当给导航项加border: 1px solid #ccc又没设box-sizing: border-box，那这个1px就从内容宽里硬扣，flex算出来的flex-basis: 0实际变成负值，布局直接飘移。
实操建议：
- 全局重置：
* { box-sizing: border-box; }，这是flex响应式的基础前提 - border和padding统一用rem或em，避免px在高DPI屏上缩得太小，影响触控和视觉比例
- 如果要用
outline做焦点样式，别和border混用，outline不占布局空间，不会扰动flex计算 - 调试时右键检查元素，在Computed面板里看
flex-basis最终值是不是预期数字，不是就说明盒模型某处吃掉了空间
flex的宽度分配本质是剩余空间再分，而盒模型决定“谁来分”和“分多少”，这两层一旦脱节，响应式就变成玄学。最常漏的是box-sizing和flex-wrap的组合开关，一不留神，小屏就只剩滚动条了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
