左侧导航固定宽度需设flex: 0 0 200px（禁缩放），右侧主区用flex-1需确保父容器display: flex、有高度且无干扰样式，ie11兼容应改用flex: 1 1 0或calc回退。
左侧导航固定宽度怎么设才不被flex撑变形
直接给左侧容器设 width: 200px 不够，flex布局下它可能被 flex-shrink 压缩，尤其内容少或父容器窄时。必须同时加 flex-shrink: 0 锁死收缩行为。
常见错误是只写 width，结果在小屏或动态内容下左侧突然变窄，分类文字换行甚至溢出。
- 左侧容器样式推荐：
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 避免用
min-width单独控制——它不阻止 flex 缩放，只是设下限，仍可能触发换行或滚动 - 如果需要响应式，在媒体查询里改
flex-basis值，而不是切到display: block，否则会破坏整体 flex 流
右侧主区用 flex-1 为什么有时没占满
flex-1 是 flex: 1 1 0 的简写，关键在第三个参数 0 —— 它让浏览器按剩余空间计算尺寸，而非按内容基准伸缩。但前提是父容器必须是 display: flex，且没有其他 flex 项争抢空间。
典型翻车场景：右侧容器里嵌套了另一个 display: flex 的组件，但忘了给它设 height: 100%，导致内部内容高度塌陷，看起来像没占满。
- 确认父容器已设
display: flex和明确高度（比如height: calc(100vh - 60px)） - 检查右侧是否意外设置了
max-width或margin，它们会压缩可用空间 - Chrome DevTools 里看 computed 样式，重点查
flex-basis是否真为0px；如果是auto，说明flex-1没生效
左右间隙和对齐怎么处理才不踩坑
电商分类导航常要求左侧菜单项垂直居中、右侧商品列表顶部对齐。但 align-items: center 会让整个右侧区域上移，破坏列表首屏可见性。
真正要的是“左侧自身居中”+“右侧顶部对齐”，不是整行对齐。
- 左侧容器加
display: flex; flex-direction: column; justify-content: center;实现内部菜单项垂直居中 - 右侧容器保持默认
align-self: stretch，不设align-items，让它自然贴顶 - 避免在父 flex 容器上设
align-items: center—— 这会让右侧也居中，商品列表第一屏直接消失 - 如果左侧有标题栏需与右侧平齐，把它抽出来放父容器顶部，别塞进左侧 flex 里
IE11 下 flex-1 不兼容怎么办
IE11 对 flex: 1 解析有 bug，尤其当父容器没设明确 flex-direction 时，flex-1 可能完全失效，右侧直接坍缩成内容宽度。
这不是加个前缀能解决的，得换策略。
- 给右侧容器显式写 IE 兼容写法：
flex: 1 1 0;（注意末尾分号不能省，IE 对语法更敏感） - 确保父容器有
flex-direction: row，IE11 默认值不总是可靠 - 更稳妥的做法：右侧用
width: calc(100% - 200px)+float: left回退，配合@supports (display: flex)做现代浏览器覆盖 - 别依赖
flex-basis: auto—— IE11 对它的处理极不稳定，一律用具体数值或0
实际项目里，左侧宽度一旦定死，右侧的弹性本质就只是“填空”，真没必要强绑 flex-1；手写 calc 或 JS 动态算宽，反而更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
