flex: 1 失效主因是父容器未提供生长空间：需父元素设 display: flex、明确主轴尺寸（如 width 或 min-height: 100vh），且中间栏不能设 width/height/flex-basis:auto；优先用 flex: 1 而非 flex-grow: 1，因其等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，行为更可控。
直接写 flex: 1 就行，但多数人失败不是因为不会写，而是父容器没给它“生长空间”。
为什么 flex: 1 常常不生效
它不是失效，是根本没机会起作用。关键条件缺一不可：
-
display: flex必须写在父容器上，漏了就全无效 - 父容器得有明确的主轴尺寸：横向布局要设
width或让其自然撑满；纵向布局（比如三行）必须设min-height: 100vh或嵌套在flex-direction: column的全高结构里 - 中间栏不能写
width、height或flex-basis: auto（默认值），否则会以内容宽度为起点，挤占剩余空间 - 左右栏若用
width: 200px，窄屏下可能被压缩，间接导致中间栏无空间可分；改用flex: 0 0 200px更稳
flex: 1 和 flex-grow: 1 选哪个
优先写 flex: 1。它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，行为更确定：
-
flex-basis: 0让中间栏从“零宽度”起步，再按比例分剩余空间；而单独写flex-grow: 1时，flex-basis默认是auto（即内容宽度），容易撑开后反向挤压左右栏 - 多个同级元素都设
flex: 1，它们严格等分；需要 2:1 比例？直接写flex: 2和flex: 1即可 - 响应式隐藏左右栏（
display: none）后，flex: 1的中间栏会立刻占满全宽；纯flex-grow: 1配合width的写法，有时残留空白
移动端适配时突然“不自适应”了
不是 Flex 失效，是空间链断了。重点排查三点：
- 父容器是否被祖先节点的
float、position: absolute或overflow: hidden截断了文档流 - 某个祖先元素（比如
body）没设高度来源，导致min-height: 100vh退化为内容高度，计算出的“剩余空间”为 0 - 用了
flex-wrap: wrap却没加媒体查询，窄屏下三栏换行，flex: 1只在单行内生效——此时应加@media (max-width: 768px) { .left, .main, .right { flex: none; } }
真正容易被忽略的是：flex: 1 在垂直方向（flex-direction: column）和水平方向行为一致，但对容器高度的依赖更强；很多人只记得设 display: flex，却忘了给父容器一个可计算的高度锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
