侧边栏高度撑不满时需设 min-height: 100vh 防塌陷；菜单项间距优先用 gap，降级用 :not(:last-child) 控制 margin-bottom；图标文字布局应固定图标宽、文字溢出隐藏；移动端应转为 fixed + translateX 切换，确保热区≥44×44px。
侧边栏高度撑不满时，flex-direction: column 会“塌陷”
Flex容器设为 flex-direction: column 后，若没有显式指定高度或最小高度，子项垂直堆叠但容器自身高度仅包裹内容——菜单项少时侧边栏就缩成一条细线，背景色、边框都看不见。这不是 bug，是 Flex 的默认行为：主轴（这里是垂直方向）不自动拉伸容器。
解决办法只有一个核心：让侧边栏容器至少占满视口高度。常见做法是：
- 给侧边栏父容器加
min-height: 100vh（推荐，兼容性好） - 或用
height: 100%+ 确保所有祖先元素（包括html、body）都有height: 100% - 避免只依赖
flex: 1——它在 column 方向下只作用于“剩余空间分配”，不解决初始高度缺失问题
flex-direction: column 下，菜单项间距不能只靠 margin
用 margin-bottom 给每个菜单项加间距，最后一项会多出多余空白；用 gap 更干净，但要注意浏览器兼容性（gap 在 flex 容器上支持从 Chrome 84+/Firefox 63+ 开始，IE 完全不支持）。
稳妥写法：
立即学习“前端免费学习笔记（深入）”；
- 优先用
gap: 0.5rem（现代项目） - 降级方案：用
:not(:last-child)控制margin-bottom，例如.menu-item:not(:last-child) { margin-bottom: 0.5rem; } - 别用
padding模拟间距——它会让点击热区变大，且破坏 item 内部布局节奏
收缩/展开侧边栏时，flex 子项宽度突变导致布局抖动
紧凑菜单常需收起图标、展开文字。若菜单项用 display: flex + flex: 1 布局图标和文字，收起时仅隐藏文字，flex: 1 仍会尝试撑宽容器，造成图标轻微右移。
真正稳定的紧凑控制方式：
- 图标区域固定宽度（如
width: 48px），文字区域用overflow: hidden+text-overflow: ellipsis，并配合white-space: nowrap - 切换状态时，只改变文字容器的
width或max-width，而非开关display - 避免对
flex-direction: column容器本身做 width 动画——column 主轴是垂直的，width 属于交叉轴，动画不触发重排优化，容易卡顿
移动端适配时，flex-direction: column 侧边栏容易被误触或遮挡
在小屏上，侧边栏若始终显示，会严重挤压主内容区；若用 position: fixed + left: 0，又可能盖住顶部导航栏或输入框。
实用处理逻辑：
- 用媒体查询在
max-width: 768px下将侧边栏设为position: fixed; width: 240px; transform: translateX(-100%);，再用 JS 切换transform: translateX(0) - 主内容区加
padding-left: 240px（桌面）→padding-left: 0（移动端），避免内容被遮挡 - 切勿在移动端直接用
flex-direction: column把菜单塞进顶部导航栏——语义混乱，可访问性差，屏幕阅读器难以识别导航结构
紧凑不是压缩，是克制地暴露必要信息。最常被忽略的一点：侧边栏里的 a 标签必须有足够点击热区（至少 44×44px），否则手指一划就点空——这比样式难看更致命。
