flex: 1 要生效需同时满足：父容器设 display: flex + flex-direction: column + 明确高度；子项加 min-height: 0 解除默认收缩限制；其本质是 flex: 1 1 0，以 flex-basis: 0 为起点等比拉伸。
flex: 1 是最直接有效的解法，但必须配合父容器的 flex-direction: column 和明确高度约束，否则它什么都不会做。
为什么只写 flex: 1 常常没反应？
不是属性失效，而是 Flex 布局引擎根本没“剩余高度”可分：
- 父容器没设
display: flex或display: inline-flex——flex: 1在非 Flex 容器中被完全忽略 - 父容器高度为
auto（比如没写height、min-height或max-height），导致“剩余空间”计算结果为 0 - 子元素自身有浏览器默认的
min-height: auto，内容极少时 Flex 拒绝压缩，必须加min-height: 0才能释放收缩能力
flex: 1 等价于 flex: 1 1 0，flex-basis: 0 才是关键
很多人误以为 flex: 1 就是“填满”，其实它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0。这个 0 表示从零宽度/高度起点开始拉伸，绕过内容自身尺寸干扰：
- 如果只写
flex-grow: 1，默认flex-basis: auto，子项会先按内容高度占位，再分配剩余 —— 内容多的项天然更高 -
flex: 1 1 0强制所有子项从同一起点（0）开始等比例拉伸，才能真正均分 - 在垂直场景中，
flex-basis: 0对应的是高度起点，不是宽度
多个子元素均分剩余高度的典型结构
常见于仪表盘、卡片内部分区、表单区域等需要“顶部内容 + 底部固定栏”的布局：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
display: flex; flex-direction: column;+ 明确高度（如height: 100vh或min-height: 500px） - 中间内容区（包裹多个子项）设
flex: 1，让它先吃掉头部/底部之外的所有剩余空间 - 该内容区内部的每个子元素（如
<div>、<p>）设flex: 1或flex-grow: 1，并确保其父级是display: flex; flex-direction: column - 若子项含图片、
<input>等替换元素，额外加min-height: 0防止它们自带的min-height: auto卡住拉伸
容易被忽略的隐形干扰项
即使代码全对，以下细节仍可能让均分失效：
- 父容器用了
gap，但子项又自己加了margin→ 总高度超限，触发flex-shrink而非flex-grow - 子项设置了
height、min-height或max-height→ 直接覆盖flex-basis，使flex: 1失效 - 子项内有长文本且
white-space: nowrap+ 无空格字符串 → 强行撑开自身，flex-basis: 0无法生效 - 父容器有
border或padding但没设box-sizing: border-box→ 视觉上“撑出”边界，实际可用高度变小
真正起作用的从来不是某一行 CSS，而是整条链路：父容器是否启用 Flex、是否有高度锚点、子项是否解除默认收缩限制、内容是否干扰基准线。漏掉任意一环，flex: 1 就只是个安静的声明。
