移动端侧边栏被遮挡的根源是flex-direction: row在小屏下空间不足，解决方案是媒体查询中改用flex-direction: column实现垂直堆叠，并移除overflow:hidden、设置width:100%及语义化HTML结构。
移动端侧边栏被遮挡，通常是因为默认的横向布局（flex-direction: row）在小屏幕上空间不足，导致侧边栏被挤压或溢出隐藏。用 flex-direction: column 是一种简洁有效的响应式解法——让主内容区和侧边栏在手机上垂直堆叠，而非并排。
用媒体查询切换 flex-direction
核心思路是在小屏幕下把容器从水平排列改为垂直排列，确保侧边栏自然换行到下方（或上方），不再被截断。
- 给包裹主内容和侧边栏的父容器设置
display: flex - 默认（桌面端）保持
flex-direction: row - 在
@media (max-width: 768px)中改为flex-direction: column - 可选：给侧边栏加
order: 2或order: 1控制上下顺序（比如希望侧边栏在内容下方）
避免侧边栏被 overflow:hidden 切掉
很多布局会为父容器设 overflow: hidden 防止横向滚动，但这在移动端反而会把侧边栏“藏起来”。检查并移除不必要的 overflow 设置，或改用 overflow-x: hidden 仅限制横向溢出。
- 优先用
overflow-y: visible确保纵向内容不被裁剪 - 如果用了
height: 100vh，注意它可能限制容器高度，导致侧边栏撑不出视口 - 用浏览器开发者工具高亮元素，确认遮挡是否来自父级的
overflow或clip-path
配合 width 和 flex-shrink 保证自适应
仅改 flex-direction 不够，还需防止侧边栏在 column 模式下仍试图占宽（如设了 width: 250px）。应让它在移动端自动撑满宽度：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏加
width: 100%或flex: 1 0 auto（在 column 下等效于占满） - 主内容区同样设
width: 100%，避免留白或错位 - 移除固定
min-width，改用min-width: 0防止 flex 项目不收缩
补充：考虑用 sidebar + main 语义化结构
HTML 结构清晰有助于 CSS 控制。推荐用 <aside> 和 <main> 标签包裹，再通过 flex 布局控制顺序与流向，比纯 div 更易维护、更利于无障碍访问。
- 例如：
<div class="layout"><main>...</main><aside>...</aside></div> - CSS 中对
.layout控制方向，对aside控制移动端宽度与顺序 - 避免用绝对定位或 float 实现侧边栏——它们在响应式中更难收放
