移动端两栏菜单应避免强制两栏，而用flex-wrap: wrap配合flex: 1 1 120px实现自然换行；失效主因是子项未设min-width: 0、父容器缺gap或误用flex: 1导致不换行。
移动端两栏菜单不用 JS 也能做，关键不是“两栏”，而是让 flex-wrap 在合适宽度下自然折成两行——但直接设 flex-wrap: wrap 很可能失效，原因基本就三条：子项没控宽、父容器没设 gap、或者用了 flex: 1 强行拉伸。
为什么加了 flex-wrap: wrap 还是不换行？
浏览器默认按内容最小宽度撑开子项（比如一个长链接或未断行的英文单词），哪怕容器只剩 1px，flex: 1 也会优先拉伸而不是换行。常见错误现象是菜单横向溢出、出现滚动条、或文字被裁成“…”。
- 检查子项是否写了
min-width: 0或flex-shrink: 0——尤其当子项内含图片、嵌套 flex 或 inline-block 元素时 - 确认父容器没漏掉
gap或用margin代替，后者会破坏 flex 换行判断逻辑 - 避免对所有菜单项统一写
flex: 1；换成flex: 0 1 auto或显式设flex-basis
flex: 1 1 120px 是怎么控制“两栏”的？
这个值不是固定两栏，而是告诉浏览器：“我愿意缩放，但基础宽度至少 120px，不够就换行”。在多数手机屏（375px–414px）下，120px × 2 = 240px，留出 padding + gap 后刚好两列；到小屏（如 320px）就会自动变成单列。
-
flex: 1 1 120px中的120px是flex-basis，即主轴上的初始尺寸 - 第一参数
1表示可放大（grow），第二参数1表示可缩小（shrink）——如果不想被压缩变形，可改flex: 0 1 120px - 真要死守“严格两栏”，建议配合媒体查询：
@media (max-width: 480px) { .menu-item { flex: 0 0 50%; } }
移动端点击后菜单不收起？这不是 CSS 的问题
纯 CSS 实现的折叠菜单（靠 input[type="checkbox"] + :checked ~）无法监听点击链接事件，所以用户点完“首页”后菜单仍展开——这是设计限制，不是 bug。
- 接受它：让用户再点一次汉堡按钮收起（最符合无障碍逻辑）
- 若必须自动收起，就得上 JS 监听
a点击，然后移除active类或重置 checkbox 的checked状态 - 别用
display: none隐藏整个导航容器后再 JS 切换，这会导致 Safari 下:checked失效；改用visibility: hidden+opacity: 0+pointer-events: none组合更稳
真正容易被忽略的是：flex-wrap 换行后，多行之间的垂直间距由 align-content 控制，不是 align-items；而很多开发者调了半天 align-items: center 却发现第二行根本不动——因为那只是控制单行内交叉轴对齐，和行与行之间无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
