flex: 0 0 200px锁死侧栏不伸缩且优先级高于width；中间栏需用flex: 1（等价于flex-grow:1;flex-shrink:1;flex-basis:0）确保自适应，IE11需显式写三属性并加-ms-前缀。
flex布局中flex: 0 0 200px和width: 200px的区别
中间栏自适应、两侧固定宽度，核心其实是「让两边不参与伸缩，中间吃掉剩余空间」。很多人直接给侧栏写width: 200px，结果发现加了flex-direction: row后，侧栏仍被压缩或撑开——因为width只是初始尺寸，flex容器会按flex-grow/flex-shrink重新分配空间。
正确做法是用flex: 0 0 200px（即flex-grow: 0、flex-shrink: 0、flex-basis: 200px）锁死侧栏：
-
flex-grow: 0→ 不放大，避免占中间的空间 -
flex-shrink: 0→ 不缩小，防止内容多时被压扁 -
flex-basis: 200px→ 明确基准宽度，比width更优先被flex引擎读取
中间栏必须设flex: 1，不能只靠flex-grow: 1
只写flex-grow: 1看似够用，但容易出问题：如果中间栏有默认min-width（比如浏览器对input或img的隐式限制），它可能卡在最小值不动；或者父容器没设min-width: 0，导致flex项目内部内容溢出时，中间栏拒绝收缩。
稳妥写法是flex: 1，它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，其中flex-basis: 0最关键——它让中间栏从「0宽度起点」开始按比例拉伸，彻底交出尺寸控制权：
立即学习“前端免费学习笔记（深入）”；
- 避免受子元素
min-width干扰 - 兼容IE11（需加
-ms-flex: 1前缀） - 当两侧栏总宽超过容器时，中间栏能正确塌缩为0而非报错
IE11下flex: 1失效的典型表现和补救
IE11对flex的支持有硬伤：flex: 1在某些嵌套场景下会完全不生效，表现为中间栏宽度为0，或整个布局错位。这不是bug，而是IE11解析flex简写时对flex-basis的处理异常。
绕过方法很直接：
- 侧栏继续用
flex: 0 0 200px（IE11支持良好） - 中间栏改用显式三属性：
flex-grow: 1; flex-shrink: 1; flex-basis: 0%（注意是0%，不是0px，IE11对0%识别更稳） - 给容器加
display: -ms-flexbox和-ms-flex: 1前缀（仅IE11需要）
别信「加min-width: 0就能修好」——它只解决部分溢出问题，对flex: 1不渲染根本无效。
响应式断点里要不要重写flex-direction？
小屏切单列时，多数人习惯把flex-direction: column加在媒体查询里。但这里有个隐藏陷阱：如果侧栏本身有固定高度（比如广告位），column会让它们垂直堆叠，撑高页面，而用户其实只想「隐藏右侧栏、左侧栏上移」。
更可控的做法是保留row，用display: none或visibility: hidden配合order调整视觉顺序：
- 用
display: none彻底移除某栏（推荐用于非关键侧栏） - 用
order把中间栏提到第一顺位，再配width: 100%（适合需要保留DOM结构的场景） - 避免在
column下还留着flex: 0 0 200px——高度会失控，尤其含图片时
真正麻烦的从来不是怎么写三栏，而是当某栏内容动态加载、高度未知，又得兼顾IE11和移动端滚动性能时，flex-basis那点毫秒级的计算偏差，就足以让布局闪一下。
