flex-grow: 1 失效的根本原因是父容器无剩余主轴空间或未形成flex上下文；必须设display: flex、明确主轴尺寸（如min-height: 100vh）、清除min-width/height等隐式限制，且子元素须为直接子项。
为什么只写 flex-grow: 1 常常没反应
不是属性写错了，是它根本没“空间”可长。flex-grow: 1 只在父容器有「剩余主轴空间」时才起作用，而这个“剩余”得靠父容器明确提供尺寸上下文。常见失效场景包括：
- 父容器没设
display: flex—— 所有 flex 属性直接被忽略 - 父容器高度为
auto（比如没设min-height: 100vh），导致垂直方向无剩余空间可分配 - 中间栏自己写了
width或height，覆盖了 flex 分配逻辑 - 左右栏用了
width但没禁用缩放，窄屏下被压缩，反而挤压中间栏
左右栏该用 width 还是 flex: 0 0 200px
优先用 flex: 0 0 200px。它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 200px，语义更完整：
-
flex-shrink: 0显式禁止压缩，避免 Safari 或极端缩放下左右栏被压扁变形 -
flex-basis: 200px比纯width更早参与 flex 空间计算，行为更可预测 - 配合
display: none做响应式隐藏时，flex: 1的中间栏能立刻占满全宽；而仅靠width的写法，有时会残留空白
中间栏写 flex: 1 还是 flex-grow: 1
推荐直接写 flex: 1。它不只是 shorthand，更是行为保障：
-
flex: 1隐含flex-basis: 0%，让中间栏从“零宽度”起步，再按比例分剩余空间；而单独写flex-grow: 1时，flex-basis默认是auto（即内容宽度），可能撑开后挤占别人 - 多个同级元素都设
flex: 1，它们严格等分；若需 2:1 比例，写flex: 2和flex: 1即可，无需额外算百分比 - 现代浏览器支持率已无顾虑，
flex: 1比分散写三属性更简洁、不易漏
移动端适配时 flex: 1 突然不生效？先查这三点
不是 Flex 失效，是空间链断了。重点检查：
- 父容器是否漏了
display: flex，或被祖先节点的float/position: absolute干扰了文档流 - 某个祖先元素（比如
body或根容器）没设高度来源，导致min-height: 100vh退化为内容高度，flex 计算出的“剩余空间”为 0 - 窄屏下三栏总最小宽度超出了容器，触发了换行 ——
flex-wrap: wrap会让flex: 1作用于单行而非整容器，此时应加flex-wrap: nowrap强制一行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
