flex: 1 是 flex-grow、flex-shrink 和 flex-basis 的简写，等价于 flex: 1 1 0%，使元素放弃自身内容宽度、按比例抢占父容器剩余空间并允许收缩。
flex: 1 是什么，它到底做了什么
flex: 1 是 flex-grow、flex-shrink 和 flex-basis 的简写，等价于 flex: 1 1 0%（注意不是 0px，是 0%）。这意味着：该元素会按比例抢占剩余空间，同时允许收缩，初始主轴尺寸为 0% —— 这个 0% 很关键，它让元素完全放弃自身内容宽度，把空间计算权交给 flex-grow。
为什么 flex: 1 不生效？常见失效场景
以下情况会让 flex: 1 看起来“没反应”：
- 父容器没设
display: flex或display: inline-flex - 父容器主轴方向是
column，但子元素有固定高度（比如height: 200px），此时flex: 1作用在高度方向，需确保父容器有明确高度（如height: 100vh） - 同级兄弟元素设置了
flex: 0 0 auto或固定宽高，但未留出足够剩余空间（例如所有子项都设了width: 200px，父容器只有600px，那flex: 1元素就分不到额外空间） - 该元素本身设置了
min-width或min-height（尤其min-width: auto在某些浏览器下会阻止压缩，而flex: 1默认含min-width: 0，但显式设置后会覆盖）
flex-grow: 1 和 flex: 1 的实际差异在哪
单独写 flex-grow: 1 并不等价于 flex: 1。它只设置了增长系数，其余两个属性仍取默认值：flex-shrink: 1、flex-basis: auto。这意味着：
- 元素仍以自身内容宽度为基准（
flex-basis: auto），再往这个基础上“加长”，而不是从零开始均分剩余空间 - 当内容很宽时，
flex-grow: 1可能导致溢出或换行，而flex: 1因为flex-basis: 0%，更彻底地“交出控制权” - 若想保留内容宽度基础 + 可伸缩，用
flex-grow: 1；若想纯粹占满剩余空间（无视内容宽度），必须用flex: 1或显式写flex: 1 1 0%
.container {
display: flex;
}
.item-fixed {
width: 120px;
}
.item-fill {
flex: 1; /* ✅ 占满剩余所有宽度 */
}
/* 等价写法： */
.item-fill-alt {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}嵌套 flex 容器中 flex: 1 的坑
在多层 flex 布局中，flex: 1 的行为容易被误解：
立即学习“前端免费学习笔记（深入）”；
- 它只对**直接父容器的剩余空间**起作用，不会穿透到外层容器
- 如果中间某层容器没设
height: 100%（在垂直布局中），那么内层flex: 1就会因为父容器高度“塌陷”而失效 - 使用
min-height: 0配合flex: 1是常见补救手段，尤其当父容器有overflow: hidden或内容可能撑高时
真正要让一个元素在嵌套结构中“占满剩余高度”，往往需要每一层都显式声明高度约束或 min-height: 0，否则 flex: 1 会卡在某个中间层失去意义。
