flex-direction 切换是侧边栏响应式的核心，桌面端用 row 实现水平并列，移动端必须显式设为 column 以避免错位；断点需实测内容撑开宽度而非硬写 768px；隐藏时保留 DOM 并用 transform 或 max-height 控制显隐，避免 display: none 导致 flex 失效。
flex-direction 切换是侧边栏响应式的核心，不是可选项
侧边栏在桌面端横向并列、移动端垂直堆叠，本质就是主轴方向切换。不改 flex-direction，只调 width 或 display，大概率导致内容溢出、对齐错乱或点击区域失效。
- 桌面端必须用
flex-direction: row（默认值），让侧边栏和主内容区水平并排 - 移动端必须显式设为
flex-direction: column，否则即使width: 100%也会因父容器仍按 row 排列而挤压文字或换行错位 - 别在同一个选择器里同时写两种方向——媒体查询必须彻底分离，避免层叠覆盖
@media 断点不能照搬 768px，得看你的内容实际撑开宽度
断点写死 @media (max-width: 768px) 是最常见但最危险的做法。你的侧边栏含 5 个汉字菜单项 + 图标 + padding，可能在 520px 就开始重叠；若含搜索框或用户头像，480px 就可能错位。
- 打开 DevTools 响应式模式，拖动窗口宽度，观察侧边栏首次出现文字截断、图标偏移或子项高度突变的那个像素值，记下来作为断点
- 优先用
max-width（移动优先），而不是min-width，否则大屏样式可能意外覆盖小屏 - 大多数真实项目只需 1 个有效断点，比如
@media (max-width: 540px)，够区分手机与小平板
隐藏侧边栏不能只靠 display: none，要配合 flex 布局重置
很多开发者给小屏加了 display: none，结果汉堡按钮点了没反应——因为 display: none 下 flex 完全不生效，后续的 transform 或 max-height 过渡都会失效。
- 小屏下应保留侧边栏 DOM，设
display: flex+flex-direction: column，再用transform: translateX(-100%)或max-height: 0+overflow: hidden控制显隐 - 如果用
max-height做展开动画，注意height: auto无法过渡，必须预估最大高度并设max-height: 300px（足够容纳所有菜单项） - 确保侧边栏容器有明确的
position: relative，否则transform移动时可能影响其他元素定位
Grid 替代方案更简洁，但 flex 更易调试和兼容老浏览器
用 grid-template-columns: 250px 1fr 配合 @media 切成 1fr 确实代码少，但一旦涉及滚动、固定头部、动态高度等内容，Grid 的隐式行为容易失控。
立即学习“前端免费学习笔记（深入）”；
- Flex 对
height: 100vh、align-items: stretch的支持更稳定，尤其在 Safari 和旧版 Chrome 中 - Grid 在侧边栏需自适应内容高度（比如菜单项数量动态变化）时，往往要额外加
minmax()或auto-fit，反而增加复杂度 - 如果你的项目要兼容 iOS 12 或 Android 4.4 WebView，优先选 Flex——Grid 的部分属性（如
gap）在这些环境需加前缀或降级处理
float: left 的子元素、一段没清除的 ::after 伪类、甚至外层 overflow: hidden，都可能让 flex-direction: column 表现异常。动手前先检查 computed styles 里的最终 flex-direction 值，比反复改断点更省时间。 
