flex-grow: 1 应加在 main 而非 footer 上，否则页脚会被拉伸；正确做法是 main 设 flex: 1 吃掉剩余空间，footer 设 flex: none 或 margin-top: auto 实现粘底。
flex-grow: 1 必须加在 main 上，不是 footer 上
很多人一看到“撑开剩余空间”，就给 footer 加 flex-grow: 1，结果页脚被拉得老长，甚至盖住内容。这是因为 flex-grow 的作用是「按比例分剩余空间」，不是「固定到底部」。它会让目标元素主动伸展，而页脚恰恰需要保持自身高度不变。
正确做法是把 flex-grow: 1（或简写 flex: 1）加在主内容区，比如 main 或 .content。它会吃掉父容器里 header 之后、footer 之前的全部空白，从而把 footer “顶”下去。
-
main设flex: 1，等价于flex-grow: 1; flex-shrink: 1; flex-basis: auto -
footer显式设flex: none或flex-shrink: 0，防止被压缩 - 若用
flex-grow: 1单独写，记得同时设flex-shrink: 0和flex-basis: 0，否则行为可能不一致
父容器必须有明确高度来源，不能只靠 content
哪怕写了 min-height: 100vh，如果 html 和 body 没继承高度，Flex 就没“剩余空间”可分——main 的 flex: 1 会直接失效，页脚回到顶部或随内容浮动。
React/Vue 项目中尤其容易踩坑：根节点（如 #app）若没设高度，body 的 min-height: 100vh 也会退化为内容高度。
- 必须设
html { height: 100% }和body { height: 100%; margin: 0 } - 或更稳妥地，直接让根容器（如
#app）设min-height: 100vh - 避免在
body上用height: 100vh—— 它会强制截断溢出，不如min-height安全
margin-top: auto 比 flex-grow: 1 更鲁棒
当页面结构复杂（比如 header 下接多个动态卡片、广告位、tab 区域），用 flex-grow: 1 得确保只有一个“撑空间”的元素；一旦漏设或多设，布局就错乱。而 margin-top: auto 只关心“最后一个想沉底的元素”，完全不依赖中间区块数量或高度。
只需给 footer 加 margin-top: auto，父容器保持 display: flex; flex-direction: column 即可生效。它和 flex-grow 互斥——别同时用在同一个元素上，后者会覆盖前者。
-
footer { margin-top: auto; }是最简、最稳的粘底写法 - 兼容 Chrome 29+ / Firefox 20+ / Safari 9+，比 Grid 更早落地
- 中间区块增删、高度变化，都不影响 footer 位置
页脚内部垂直居中要用 justify-content + align-items
粘性页脚只是“位置到底部”，不代表里面文字自动居中。如果页脚有固定高度（比如 height: 60px），要让文字垂直+水平居中，得在 footer 自身启用 Flex：
footer { display: flex; justify-content: center; align-items: center; height: 60px; }
注意别在 body 或 main 上误加这些属性——它们控制的是子元素在主轴/交叉轴的位置，不是页脚内容。
-
justify-content控制主轴（column 下是垂直方向）对齐 -
align-items控制交叉轴（column 下是水平方向）对齐 - 若页脚内需左右两端对齐（如版权左、链接右），改用
justify-content: space-between
html → body → #app → container 任意一环没传高，flex: 1 就静默失效，且浏览器不会报错。调试时先检查 computed height，再逐层确认是否被 overflow: hidden 或 position: absolute 截断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
