flex布局使导航栏天然水平排列，通过display: flex、justify-content、align-items等属性解决对齐与间距问题；响应式断点应依内容撑满容器的实际临界值设定，移动端常用checkbox+css实现汉堡菜单，需注意dom结构、viewport设置及可访问性。
Flex布局让导航栏天然水平排列
默认情况下，<nav></nav> 里的 <ul></ul> 和 <li> 是块级或列表项，容易换行或带默认缩进。用 display: flex 直接解决对齐和间距问题，无需浮动或 inline-block。
关键点：
-
flex-direction: row（默认）保证菜单项从左到右排布 -
justify-content: flex-end或space-between控制左右对齐或均分间隙 -
align-items: center让文字、图标在行内垂直居中（尤其配合height或line-height时） - 给
<a></a>加text-decoration: none和padding，比只靠<li>更可控点击热区
@media 查询在什么断点折叠菜单
别盲目套用 768px 或 992px —— 实际看内容撑满容器的临界点。用浏览器 DevTools 的响应式模式拖动宽度，观察菜单何时开始换行或挤压，那个像素值才是你该用的断点。
常见做法：
- 桌面端保持
flex水平展开，flex-wrap: nowrap - 移动端改用
flex-direction: column+position: absolute或transform: translateY()隐藏菜单，再配合 checkbox 或 JS 切换visibility和height - 避免用
display: none直接隐藏整个<ul></ul>，否则屏幕阅读器可能跳过导航；改用clip-path: inset(100%)或aria-hidden="true"配合可见性控制
汉堡按钮点击后菜单不弹出？检查这几个地方
纯 CSS 实现汉堡菜单依赖 input[type="checkbox"] + label + 相邻兄弟选择器（~），最容易卡在 DOM 结构或样式优先级上。
排查清单：
- 确保
<input id="menu-toggle">和<ul class="nav-list"></ul>在同一父容器内，且<ul></ul>紧跟在<input>后面（否则#menu-toggle:checked ~ .nav-list不生效） -
<label for="menu-toggle"></label>的for值必须和<input>的id完全一致，大小写敏感 - 移动端需加
viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询可能不触发 - 如果用了
transform动画展开，记得给.nav-list设overflow: hidden，不然内容会溢出
Flex + Media Queries 组合的性能与兼容性提醒
Flex 布局本身在现代浏览器中无压力，但老版本 Safari（flex-wrap、align-self 支持不稳定；而媒体查询在 IE9+ 都可用。
务实建议：
- 如果必须支持 IE11，避开
flex: 1这类简写，拆成flex-grow: 1+flex-shrink: 1+flex-basis: 0，并加-ms-前缀 - 不要在
@media里重复整套 Flex 规则，只覆盖需要变的部分（比如只改flex-direction和position） - 用
min-width而非max-width写断点更利于渐进增强：先写移动端样式，再用@media (min-width: 768px)加桌面增强
最常被忽略的是焦点管理——键盘用户按 Tab 进入导航后，折叠状态下应把焦点限制在汉堡按钮内，展开后才可遍历菜单项。这没法只靠 CSS 完成，得配合 tabindex 和 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
