flex: 1生效需满足三前提：父容器display: flex、主轴方向明确、主轴有剩余空间；失效主因是父容器未设flex、尺寸为auto导致无剩余空间，或子元素min-width/min-height锁死。
直接写 flex: 1 就行，但必须满足三个硬性前提：父容器是 display: flex、主轴方向明确、父容器在主轴方向上有可分配的剩余空间。
为什么最后一个子元素加了 flex: 1 还不撑开？
它不是“最后一个”才生效，而是看它是否在主轴方向上有兄弟元素占位后留下的空间。常见失效原因：
- 父容器没设
display: flex或display: inline-flex——flex: 1在非 Flex 容器里完全被忽略 - 父容器高度/宽度是
auto，比如没设height: 100vh或width: 100%，导致“剩余空间”为 0 - 最后一个子元素自身有内容撑高（如长文本、图片），而浏览器默认
min-width: auto或min-height: auto锁死了收缩下限，flex: 1拉不开
横向布局（flex-direction: row）时怎么填宽？
适用于侧边栏 + 主内容区这类结构。关键点：
- 固定宽的兄弟元素（如侧边栏）建议写
flex: 0 0 240px，明确不伸缩、不收缩、基础宽 240px - 最后一个子元素写
flex: 1，等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，从 0% 开始均分剩余宽度 - 避免同时写
width: 100%，会和 Flex 计算冲突 - 如果内容含超长无空格字符串（如一串 base64），加
min-width: 0和word-break: break-word
纵向布局（flex-direction: column）时怎么填高？
典型场景是顶部 header + 中间内容区 + 底部 footer。最后一个子元素（比如 main）要填满中间高度：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
height: 100vh（或具体像素值），且flex-direction: column - 非最后一个子元素（如
header、footer）用固定height或flex: 0 0 auto - 最后一个子元素写
flex: 1，并显式加min-height: 0—— 这是 iOS Safari 和 Chrome 滚动时高度异常的最常见解药 - 若该区域需滚动，
overflow-y: auto要加在它自己身上，别加在父容器
嵌套 Flex 容器里，最后一个子元素的“剩余空间”从哪来？
只来自它的**直接父容器**，和外层无关。容易踩坑的点：
- React/Vue 组件层层包裹后，中间某层忘了设
display: flex，内层flex: 1就断掉了 - Tab 页面中，外层是
column，中间加了一层div但没设flex，导致内容区拿不到“剩余高度” - 不要试图用
height: 100%穿透多层去补救 —— Flex 的空间分配不走百分比链，只认直接父容器的主轴尺寸
真正起作用的从来不是“最后一个”，而是“谁在主轴上有兄弟、且兄弟已占位”。flex: 1 是个很老实的属性，给它空间它就填，没空间它就歇着 —— 所以检查父容器的 display、尺寸、方向，比调子元素更关键。
