起作用，但仅在父容器有剩余空间且 flex-grow > 0 时生效；flex-basis 设为固定值（如 200px）提供初始基准宽度，不锁死最终宽度。
flex-basis 设为固定值时，flex-grow 还起作用吗
起作用，但只在剩余空间存在时才生效。当 flex-basis 是具体长度（如 200px），容器会先按该宽度分配基础尺寸；若父容器有富余空间，且 flex-grow > 0，元素才会继续拉伸。
常见错误是以为设了 flex-basis: 200px 就完全锁死宽度——其实只要 flex-grow: 1，它仍会占满剩余空间（除非其他兄弟项也在争抢）。
-
flex: 0 1 200px→ 不放大、可缩小、基准 200px（最常用“固定宽”写法） -
flex: 1 1 200px→ 可放大、可缩小、基准 200px（自适应场景） -
flex: 1 0 200px→ 可放大、不缩小、基准 200px（推荐用于“最小 200px，但能撑开”的情况）
如何让一个项固定宽 + 另一个项填满剩余空间
典型两栏布局：左侧导航栏固定 240px，右侧内容区自适应。关键不是只靠 flex-grow，而是控制缩放行为。
.container {
display: flex;
}
.sidebar {
flex: 0 0 240px; /* 不放大、不缩小、基准 240px */
}
.main {
flex: 1; /* 等价于 flex: 1 1 0px，会吞掉所有剩余空间 */
}注意：flex: 1 默认 flex-basis 是 0px，所以它从零开始按比例分剩余空间——这比设 flex-basis: auto 更可靠，避免内容宽度干扰计算。
立即学习“前端免费学习笔记（深入）”；
- 如果
.main里有长文本或图片，加min-width: 0防溢出（Flex item 默认是min-width: auto，会阻止收缩） - 不要对
.sidebar设width，优先用flex-basis，否则可能和 Flex 计算冲突
flex-basis auto 和具体数值的区别在哪
flex-basis: auto 表示先按元素自身内容宽度（或 width 值）作为基准，再参与弹性计算；而 flex-basis: 200px 强制以该值为起点，无视内容实际宽度。
这意味着：
- 内容很窄（比如空 div）+
flex-basis: auto→ 基准可能是 0，flex-grow一开就撑满 - 内容很长（比如超长单词）+
flex-basis: auto→ 基准可能远超容器，触发换行或溢出 -
flex-basis: 200px则稳定可控，适合 UI 中明确的“固定区域”
调试时可临时加 outline: 1px solid red 查看实际占用宽度，确认是否被内容撑开。
IE11 下 flex-basis 百分比值的行为异常
IE11 对 flex-basis: 50% 支持不一致：它有时按父容器宽度算，有时按内容宽度算，极易导致错位。生产环境应避免。
- 固定宽一律用 px/em/rem，如
flex-basis: 200px - 想实现百分比响应效果，改用
flex: 1+max-width/min-width组合 - 若必须用百分比，加
flex-shrink: 0并测试不同内容长度下的表现
真正容易被忽略的是：即使现代浏览器中，flex-basis 设为 auto 且元素有 width，其最终基准取值顺序是「width → 内容固有宽 → 0」，这个隐式 fallback 在复杂嵌套中常引发意料外的宽度跳变。
