flex: 0 和 flex: 1 不能直接实现“固定+自适应”是因为 flex: 0 等价于 flex: 0 0 auto（不放大、不缩小、内容宽），而 flex: 1 是 flex: 1 1 0，会抢占剩余空间；正确写法是固定项用 flex: 0 0 200px，自适应项用 flex: 1，且需确保父容器 display: flex、无 flex-wrap 干扰。
flex: 0 和 flex: 1 组合为什么不能直接“固定 + 自适应”
因为 flex: 0 并不等于“固定宽度”，它等价于 flex: 0 0 auto，意味着不放大、不缩小、按内容宽（或 width 设置）显示；而 flex: 1 是 flex: 1 1 0，会把剩余空间全占掉，但前提是父容器有明确宽度且子项没被其他规则干扰。常见错误是：给固定项设了 width 却没关掉 flex-shrink，结果在窄屏下被压缩。
正确写法：用 flex: 0 0 <width> + flex: 1
要真正实现“某元素固定宽度、其余自适应”，必须显式控制三项：不放大、不缩小、指定基准尺寸。固定项应写成 flex: 0 0 200px（或 flex: 0 0 12rem），自适应项用 flex: 1 即可。注意：两者必须同级、同父容器，且父容器需设 display: flex。
.container {
display: flex;
}
.fixed {
flex: 0 0 180px; /* 不放大、不缩小、基准宽 180px */
}
.grow {
flex: 1; /* 吃掉所有剩余空间 */
}- 别写
flex: 0或flex: none—— 它们不带尺寸，浏览器仍可能按内容撑开或受 margin 影响 - 如果固定项内有文字/图片，记得加
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;防溢出 - IE11 对
flex: 0 0 auto解析不稳定，务必用具体数值（如200px）代替auto
遇到 width 冲突或 flex 不生效的排查点
常见失效原因不是语法错，而是隐性样式覆盖。比如：width 和 flex 同时存在时，flex-basis（即 flex: 0 0 200px 中的 200px）优先级高于 width，但若写了 width: 100% 又没设 box-sizing: border-box，padding 会让实际宽度超限，触发 flex shrink 行为。
- 检查固定项是否意外继承了
max-width: 100%（来自某些 CSS 框架） - 确认父容器没有
flex-wrap: wrap—— 这会让flex: 1失效（换行后不再计算剩余空间） - Chrome DevTools 里看 computed 样式，重点核对
flex-basis是否真为预期值（如180px），而不是auto或0px
替代方案：grid 实现更直观的固定+自适应
如果只是两列布局（一列固定、一列填满），CSS Grid 更直白，且无 flex 的 shrink/grow 理解成本：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 180px 1fr;
}这种写法天然规避了 flex 的缩放逻辑，1fr 就是“剩余所有可用空间”，180px 就是硬性宽度，不随内容变化，也不受父容器 padding 影响。兼容性上，现代浏览器（Chrome 57+/Firefox 52+/Safari 10.1+）都支持，比 flex 的 IE11 兼容问题少得多。
真正容易被忽略的是：flex 的 flex-basis 在不同浏览器中对 auto 的处理差异很大，尤其涉及内联元素或未设置 min-width 的场景；而 grid 的 1fr 行为稳定得多——除非你必须支持 IE11，否则别硬扛 flex 的坑。
