flex: 1 等价于 flex: 1 1 0，强制以 flex-basis: 0 为基准分配空间，忽略内容宽度；若需保留内容尺寸，应显式使用 flex: 1 1 auto 或 fit-content，并注意 ie11 对 auto 的异常解析。
flex 属性值顺序不能乱，flex: 1 和 flex: 1 1 0 行为完全不同
很多人以为 flex: 1 就是“等分剩余空间”，其实它等价于 flex: 1 1 0（即 flex-grow: 1、flex-shrink: 1、flex-basis: 0）。关键在 flex-basis: 0 —— 它会让元素忽略自身内容宽度，从零开始按比例分配空间。如果你希望保留内容宽度再伸缩，得显式写成 flex: 1 1 auto 或 flex: 1 1 fit-content。
常见错误现象：flex: 1 下文字过长导致父容器溢出，或多个项高度不一致；本质是 flex-basis: 0 强制重置了自然尺寸。
-
flex: 1→flex-grow: 1; flex-shrink: 1; flex-basis: 0 -
flex: 1 1 auto→ 优先按内容宽高布局，再伸缩 -
flex: 0 0 auto→ 完全不伸缩，等价于flex: none - 不要用
flex: 1 0这种漏写值的写法，浏览器会按规则补全，结果不可控
flex-shrink 为 0 时，内容超长仍可能溢出，不是“禁止缩小”的万能解
flex-shrink: 0 只阻止弹性收缩，不阻止文本换行、溢出或滚动。尤其当父容器 white-space: nowrap 或子元素含内联块/绝对定位内容时，flex-shrink: 0 无法防止横向溢出。
使用场景：固定宽度侧边栏 + 自适应主内容区，但主内容里嵌套了表格或长链接。
立即学习“前端免费学习笔记（深入）”；
- 若要真防溢出，配合
min-width: 0（触发 BFC，让flex-shrink生效） - 对文字内容，加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap -
flex-shrink: 0在 safari 旧版本中对img标签支持不稳定，建议加max-width: 100%
flex-basis 设为百分比时，基准是父容器主轴尺寸，但受 box-sizing 影响
flex-basis: 50% 看似简单，实际计算时会先减去父容器的 padding 和 border（如果 box-sizing: border-box），再按剩余可用空间算 50%。而默认 box-sizing: content-box 下，它只基于 content 区域，容易误判。
性能影响：百分比 flex-basis 不会触发布局重排（reflow），但和 width 混用时可能引发隐式冲突，浏览器需多次计算。
- 统一设
box-sizing: border-box到所有弹性子项，避免基准不一致 - 避免同时设置
flex-basis和width，css 会以flex-basis为准，width被忽略 -
flex-basis: 200px比flex-basis: 25%更稳定，尤其在响应式嵌套中
IE11 的 flex-basis auto 行为异常，必须用具体值兜底
IE11 把 flex-basis: auto 解析为 flex-basis: 0，导致本该按内容宽度渲染的项被压缩归零。这是最隐蔽的兼容性坑，开发时看不到，上线后用户反馈“按钮没了”“文字叠一起”。
可给出简短示例：
/* 错误：IE11 下失效 */ .item { flex: 1 1 auto; } <p>/<em> 正确：提供 fallback </em>/ .item { flex: 1 1 auto; flex-basis: max-content; /<em> IE11 忽略，但现代浏览器更好 </em>/ } .item { flex-basis: fit-content; } /<em> 单独一行，IE11 忽略此行 </em>/</p>- 真实项目中建议直接写
flex: 1 1 min-content或具体像素值 - 用 Autoprefixer 无法修复此问题，它是运行时解析差异，不是前缀缺失
- 如果依赖
flex-basis: auto做响应式卡片布局，务必在 IE11 下实测内容是否被截断
事情说清了就结束。真正麻烦的从来不是语法，而是 flex-basis 在不同上下文里到底“以谁为基”——内容？父容器？盒模型？这个基准一旦错，整个弹性流就偏了。