核心思路是父容器设 display: flex，侧边栏用 flex: 0 0 240px 锁定宽度，主内容用 flex: 1 自适应填满；收起时改用 flex: 0 0 0 + width: 0 + overflow: hidden 实现平滑过渡，避免 display: none 导致重排错乱。
用 display: flex 实现侧边栏主内容自适应布局
核心思路是把容器设为 flex，侧边栏用 flex: 0 0 auto 锁定宽度不伸缩，主内容用 flex: 1 填满剩余空间。这样既避免浮动或绝对定位的副作用，又天然支持响应式断点切换。
-
flex: 0 0 auto表示“不放大、不缩小、按内容或设定宽”，适合固定宽度侧边栏（如240px或20rem） -
flex: 1等价于flex: 1 1 0，主内容会撑开并响应容器变化，无需写死width - 注意父容器必须有明确高度（如
height: 100vh）或靠内容撑开，否则flex可能不生效
移动端收起侧边栏时用 flex 隐藏而非 display: none
直接用 display: none 会导致 flex 项重排错乱，尤其在动画或 JS 切换状态时容易闪动或错位。推荐用 flex: 0 0 0 + overflow: hidden 配合 width: 0 实现“视觉隐藏但保留布局流”。
- 收起状态：给侧边栏加
flex: 0 0 0、width: 0、overflow: hidden，主内容自动占满 - 展开状态：恢复
flex: 0 0 240px（或其他设定值），过渡用transition: flex 0.3s ease - 不要对
flex属性本身做transition，部分浏览器不支持；改用min-width或width过渡更稳妥
侧边栏内部文字换行和溢出处理要单独控制
Flex 容器默认不会让子元素自动换行，侧边栏里长菜单名或标题容易撑破宽度。不能只靠 white-space: nowrap，得配合 overflow 和 text-overflow。
- 菜单项文字：用
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 侧边栏整体：若内容超长需滚动，给侧边栏加
overflow-y: auto，并确保父容器有固定高度 - 避免对
flex子项设width: 100%—— 它会跟flex计算冲突，优先用flex-basis或min-width
.sidebar {
flex: 0 0 240px;
min-width: 240px;
overflow-y: auto;
}
.sidebar.collapsed {
flex: 0 0 0;
width: 0;
overflow: hidden;
transition: width 0.3s ease;
}
.sidebar a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
侧边栏的弹性行为常被误认为“只要设了 flex 就自动响应”，其实关键在 flex-shrink 和 flex-basis 的组合是否匹配实际需求；小屏下即使用了 @media 切换 flex 值，也要检查父容器是否被其他样式（比如 min-width 或 position: fixed）锁死了尺寸。 
