flex: 1 不等于自适应，因其简写为 flex: 1 1 0%，而 flex-basis: 0% 在内容存在时会导致宽度失控；应显式使用 flex: 1 1 0 或拆解声明，并为两侧设 flex: 0 0 宽度值，ie11 需加前缀及 min-width: 0 补丁。
直接写 flex: 1 给中间元素，大概率会出问题——它看起来能用，但实际在窄容器、含文字/图片的中间项、或 IE11 下，宽度会失控或完全不生效。
为什么 flex: 1 不等于“自适应”
因为 flex: 1 是 flex: 1 1 0% 的简写，而浏览器对 flex-basis: 0% 的解析存在歧义：若中间元素有固有内容宽（比如一段文字或一张图片），渲染引擎会先按内容占位，再拉伸，导致它侵占两侧空间，尤其在容器变窄时挤压甚至隐藏左右栏。
真正可控的行为是强制从零基准开始分配剩余空间。必须显式写成：
-
flex: 1 1 0（现代浏览器） - 或拆解为
flex-grow: 1; flex-shrink: 1; flex-basis: 0;（更清晰，也便于调试）
同时，两侧元素不能只靠 width，得加弹性约束：
- 用
flex: 0 0 200px（推荐），而非仅width: 200px - 避免
flex: 0 0 auto配合长文本——它会撑开，破坏“固定感”
IE11 下 flex: 1 1 0 失效怎么办
IE11 对 flex 缩写支持不全，flex: 1 1 0 会被忽略，退化为 flex: 0 1 auto，中间项就卡死在内容宽度不动了。
必须全部拆解并加前缀：
- 父容器加
display: -ms-flexbox; - 左侧：
-ms-flex: 0 0 200px; - 中间：
-ms-flex: 1 1 0;+min-width: 0;（IE 对弹性项最小尺寸计算异常，这行是救命补丁） - 右侧：
-ms-flex: 0 0 180px;
漏掉任意一项，都可能在 IE 中表现为中间区域塌缩成一条线或完全不可见。
响应式切换时三栏堆叠错乱
很多人加了媒体查询让三栏变单列，却忘了清除 flex 行为，结果小屏下仍强行横排、内容溢出或换行异常。
正确做法是：在断点内重置所有子项的 flex 值，并确保 DOM 顺序合理：
- 小屏下统一设
flex: 0 0 100%（不是flex: 1） - 配合
box-sizing: border-box防止 padding/border 导致超宽 - 父容器加
flex-wrap: wrap允许换行（但大屏下必须禁用，否则三栏可能意外折行）
如果中间内容高度不一致，还需给父容器设 align-items: stretch 或显式 min-height，否则视觉上“栏高不齐”。
别碰 justify-content: space-between 来“假装自适应”
有人把左右设固定宽，中间留空，再用 justify-content: space-between 推开——这根本不是自适应，只是视觉居中。中间区域仍是 width: auto，内容一多就换行，容器缩小时直接溢出，且无法滚动。
真正的自适应必须依赖 flex 的空间分配机制，而不是对齐行为。只要没给中间项设置 flex-grow: 1 及对应 flex-basis，它就不参与剩余空间计算。
最容易被忽略的点：当容器总宽小于三者最小所需宽度（例如左 200px + 中内容最小宽 300px + 右 180px = 680px），即使写了 flex: 1 1 0，浏览器也会优先保内容、压缩中间项，此时需额外加 min-width: 0 和 overflow: hidden 控制截断行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
