Flexbox导航栏小屏溢出因默认flex-wrap: nowrap应设flex-wrap: wrap或media下flex-direction: columnlogo与菜单两端对齐用margin-left: autoactive状态需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: autoFlex 会把它推到最右不要用 text-align: right 对齐菜单那会破坏 Flex 的流式控制如果菜单项太多margin-left: auto 依然有效而 space-between 在三项以上时容易导致间距不均点击菜单项后怎么高亮当前页active状态CSS 本身没法判断“当前页”必须靠 HTML 加类名或 JS 注入。很多人卡在这儿以为写个 :hover 就完事了。服务端渲染时后端模板如 EJS、Django直接给对应 li 加 classactive前端路由React Router / Vue Router用 NavLink 或 router-link-active 类自动处理纯静态页只能手写 classactive或者用一小段 JS 比对 window.location.pathname 和 a.href别用 a:visited 模拟 active它只认历史访问且样式受限只能改颜色不能加背景移动端汉堡菜单要不要用 JavaScript 切换显示可以不用。CSS-only 方案足够稳定且避免 JS 失效时菜单永远隐藏。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。