正确做法是两端用flex: 0 0 auto、中间用flex: 1 1 0，且父容器设display: flex；仅写flex: 1会导致中间元素按内容宽占位再拉伸，易挤压两侧；ie11需拆解为flex-grow: 1; flex-shrink: 1; flex-basis: 0并加-ms-前缀。
flex: 0 0 auto 和 flex: 1 1 0 配合使用才是关键
直接设 flex: 1 给中间元素会导致它侵占两端固定宽元素的可用空间，尤其在容器窄时挤压甚至隐藏两侧内容。正确做法是：两端用 flex: 0 0 auto（不伸缩、不收缩、按内容宽），中间用 flex: 1 1 0（强制从 0 基准开始拉伸，避免内容宽度干扰分配）。
常见错误是只写 flex: 1，它等价于 flex: 1 1 0 —— 看似没问题，但若中间元素有固有宽度（比如含文字或图片），浏览器仍会先按内容宽占位，再拉伸，导致实际宽度大于预期。显式写 flex: 1 1 0 能绕过这个默认行为。
- 左侧/右侧元素：设置明确宽度（如
width: 80px）或用flex: 0 0 80px - 中间元素：必须用
flex: 1 1 0，不能依赖内容宽度 - 父容器需设
display: flex，且**不要**设flex-wrap: wrap（否则可能换行破坏布局）
当两侧元素含文字或图标时，需防溢出和截断
如果左/右是按钮或带文字的标签，flex: 0 0 auto 可能因文字过长撑开容器，破坏“固定感”。此时应加约束：
- 对两侧子元素加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 或改用
flex: 0 0 max-content+min-width/max-width控制弹性边界 - 避免给两侧元素设
flex: 1或width: 100%，这会让它们抢中间的空间
典型错误现象：text-overflow: ellipsis 不生效 → 忘了同时设 white-space: nowrap 和 overflow: hidden，缺一不可。
IE11 兼容性下 flex: 1 1 0 会失效
IE11 对 flex 缩写支持不全，flex: 1 1 0 会被忽略，退回到 flex: 0 1 auto 行为，中间元素无法自适应。必须拆解为独立属性：
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
同时确保父容器有 display: -ms-flexbox（IE前缀），且所有 flex 子项都加上 -ms-flex: 前缀值（如 -ms-flex: 1 1 0;）。否则 IE 下中间宽度恒为内容宽，不随容器变化。
用 justify-content: space-between 会破坏自适应逻辑
有人尝试用 justify-content: space-between 配合固定宽左右元素，让中间“看起来居中”，但这只是视觉欺骗：中间元素仍是 width: auto，不会随容器缩放，且一旦内容变多就可能换行或溢出。真正的自适应必须靠 flex 的分配机制，不是靠对齐。
容易被忽略的点：当容器宽度小于三者最小总宽（如两侧各 100px + 中间最小内容宽 200px = 400px），即使写了 flex: 1 1 0，中间也会被压缩到 min-width: auto 的极限（通常是 0），此时需手动设 min-width: 0 防止内容溢出父容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
