固定侧边栏需设 flex-shrink: 0（如 flex: 0 0 240px），主内容区用 flex: 1 并加 min-width: 0 防溢出，小屏可通过改 sidebar flex-basis 为 0 隐藏。
固定侧边栏 + 自适应主内容区的Flex实现
直接用 display: flex 实现两栏布局时，固定宽度栏不会“撑开”自适应栏——关键不是设 flex: 1，而是控制 flex-shrink 和 min-width。否则在小屏下，自适应栏可能被压缩到文字换行甚至溢出。
侧边栏固定宽度必须显式设置 flex-shrink: 0
Flex 默认允许子项收缩（flex-shrink: 1），即使你写了 width: 240px，当容器变窄时，浏览器仍会压缩它来保主内容。必须加 flex-shrink: 0 才真正“锁住”宽度。
常见错误写法：.sidebar { width: 240px; } → 小屏下会被压窄
正确写法：.sidebar { flex: 0 0 240px; }（等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 240px;）
主内容区用 flex: 1 但需防文字溢出
flex: 1 看似简单，但它会让主区占据剩余全部空间，而如果内部有长单词、URL 或未设 word-break 的文本，就会横向溢出容器。
- 务必给主内容区加
min-width: 0（防止 Flex 子项最小宽度干扰收缩） - 对可能溢出的文本容器加
word-break: break-word或overflow-wrap: break-word - 避免在主区内用
white-space: nowrap，除非明确需要
响应式断点只需改侧边栏的 flex-basis
不需要媒体查询里重写整个布局。移动端想隐藏侧边栏？直接改它的 flex-basis 为 0 并配合 opacity 或 transform 动画即可，主内容区会自动占满。
示例（小屏收起侧边栏）：
@media (max-width: 768px) {<br> .sidebar { flex: 0 0 0; opacity: 0; }<br> .main { flex: 1; }<br>}
注意：此时要额外加
overflow: hidden 或用 transform: translateX(-100%) 配合过渡，否则视觉上仍占位。
最易忽略的是 min-width: 0 —— 它不写，主内容区在窄屏下就可能拒绝收缩，导致横向滚动条意外出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
