flex-wrap: wrap加了也不换行，是因为它仅在容器宽度不足时“允许”换行，而非强制换行；需同时满足父容器有明确宽度、子项可收缩（如min-width: 0）、无white-space: nowrap等阻碍条件。
flex-wrap: wrap 为什么加了也不换行
因为 flex-wrap: wrap 只是“允许”换行，不是“强制”换行——它只在容器宽度小于所有子项总宽时才触发。但默认情况下，<a></a> 或 <li> 的 min-width 是 auto，会死守文字内容宽度，宁可溢出也不压缩，导致换行条件永远不满足。
实操建议：
- 给每个导航项（如
.nav-item或a）显式设min-width: 0 - 搭配
flex: 1 1 auto（别用flex: 1），避免窄屏下强行拉伸 - 如果文字太长，
white-space: nowrap会锁死单行，反而阻碍换行；需要时改用white-space: normal+overflow: hidden+text-overflow: ellipsis（仅限单行截断）
@media (max-width: 768px) 折叠菜单没反应
这不是 CSS 没生效，而是结构和逻辑没对齐：媒体查询只负责“隐藏”，不负责“交互”。你写了 @media (max-width: 768px) { .nav-menu { display: none; } }，但没提供按钮、没绑定 JS、或者 HTML 里压根没写 <button class="nav-toggle"></button> 和包裹的 <nav class="nav-menu"></nav>。
实操建议：
- HTML 必须有独立的汉堡按钮和导航容器，不能靠 flex-wrap “撑出来”
- CSS 中小屏下用
display: none隐藏主菜单，别用visibility: hidden（仍占布局空间） - JS 切换的是类名（如
.nav--expanded），CSS 里必须对应写.nav--expanded .nav-menu { display: flex; }，类名不一致就白忙 - 真机测试前确认
<meta name="viewport" content="width=device-width, initial-scale=1">已声明，否则 iPad 上媒体查询可能匹配错宽度
Flex 导航在 Safari 上点击失效或动画卡顿
Safari 对 transform 和 opacity 的过渡渲染更严格。如果用了这些做展开动画但没配 will-change: transform，或者 JS 在 DOM 尚未就绪时就绑定了事件（比如放在 里执行），就会失灵。
实操建议：
- 动画属性加
will-change: transform（仅对动画元素加，别滥用） - JS 绑定确保在
DOMContentLoaded后执行，或把 script 放在前 - 别用纯 CSS 的
:checked + .nav-menu方案——iOS Safari 对伪元素点击支持不稳定，且无法键盘 tab 导航 - 折叠状态下的菜单推荐用
position: absolute; top: 100%而非display: none，否则屏幕阅读器会跳过整个导航
为什么断点设成 768px，但在手机上还是不触发
因为断点值不是设备尺寸，而是视口（viewport）宽度。Chrome DevTools 的 “iPad” 预设只是模拟，真机横屏 iPad 可能报告 width: 1024px，但 layout viewport 实际是 768px —— 这取决于 <meta name="viewport"> 是否存在且正确。
实操建议：
- 断点统一用
max-width（如@media (max-width: 640px)），符合“从大到小”的响应逻辑 - 别抄通用值，先在浏览器里拖动窗口缩小，观察导航何时开始挤压/错位，记下那个像素值作为真实断点
- 一个导航栏通常只需 1 个有效断点；多断点易维护混乱，也容易互相覆盖
- 移动端点击区域必须 ≥ 44×44px，光靠
font-size: 14px不够，得用padding扩展热区
最常被忽略的不是 flex 属性怎么写，而是 viewport 声明是否到位、类名是否前后一致、点击热区是否达标——这三个点一错，再准的 flex 规则也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
