Flexbox导航栏小屏溢出因默认flex-wrap: nowrap，应设flex-wrap: wrap或@media下flex-direction: column；logo与菜单两端对齐用margin-left: auto；active状态需HTML加类或JS/路由处理；汉堡菜单可用CSS-only方案实现。
Flexbox导航栏为什么在小屏上会溢出
因为默认 flex-wrap 是 nowrap，所有 li 强行挤在一行，宽度超了就横向滚动或遮挡。不是代码写错了，是没告诉 Flex 它可以换行。
- 移动端优先的话，直接设
flex-wrap: wrap，但得配合min-width: 0防子项撑开父容器 - 更稳妥的做法是用
@media控制：小屏下改flex-direction: column，而不是硬塞换行 - 别忘了给
a标签加white-space: nowrap，否则文字在窄屏里断行，按钮高度崩掉
如何让logo和菜单在一行但又能自动对齐两端
靠 justify-content: space-between 不够——如果只有 logo + 一个菜单项，它俩会被拉到头尾，中间空一大片。真实场景要的是“logo左贴、菜单右贴、中间留白可扩展”。
- 把菜单包裹进一个
nav或div，设margin-left: auto，Flex 会把它推到最右 - 不要用
text-align: right对齐菜单，那会破坏 Flex 的流式控制 - 如果菜单项太多，
margin-left: auto依然有效；而space-between在三项以上时容易导致间距不均
点击菜单项后怎么高亮当前页（active状态）
CSS 本身没法判断“当前页”，必须靠 HTML 加类名或 JS 注入。很多人卡在这儿，以为写个 :hover 就完事了。
- 服务端渲染时，后端模板（如 EJS、Django）直接给对应
li加class="active" - 前端路由（React Router / Vue Router）用
NavLink或router-link-active类自动处理 - 纯静态页？只能手写
class="active"，或者用一小段 JS 比对window.location.pathname和a.href - 别用
a:visited模拟 active，它只认历史访问，且样式受限（只能改颜色，不能加背景）
移动端汉堡菜单要不要用 JavaScript 切换显示
可以不用。CSS-only 方案足够稳定，且避免 JS 失效时菜单永远隐藏。
- 用
input[type="checkbox"]隐藏，搭配label当按钮，用:checked ~ ul控制菜单显隐 - 注意
ul必须和input在同一层 DOM，否则~选择器不生效 - 如果需要过渡动画，
max-height+overflow: hidden比display: none更友好（后者无法过渡） - JS 方案更适合要监听滚动、添加 backdrop、或兼容老 IE 的项目——但现代项目真没必要
Flex 导航栏最难的不是排列，而是“什么时候该断点、断点后要不要重排结构、以及 active 状态谁来维护”。这三个问题没想清楚，光调 flex-direction 没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
