Flex垂直流下实现粘性底部的核心是让主内容区（如main）设flex: 1或margin-top: auto，从而将页脚“顶”或“推”到底部；flex-grow: 1不可用于footer，否则会拉伸页脚破坏布局，且必须确保父容器有明确高度（如min-height: 100vh）及完整高度链。
Flex 垂直流下实现粘性底部，核心不是靠 flex-grow 撑开，而是用 flex: 1 或 margin-top: auto 把内容“推”下去——flex-grow 单独用在子项上反而容易失效或破坏结构。
为什么 flex-grow: 1 单独写在 footer 上没用
很多人误以为给 footer 加 flex-grow: 1 就能把它“拉”到底部，实际完全相反：flex-grow 是让元素**抢占剩余空间**，footer 一旦开始拉伸，它就不再是固定高度的页脚，而是会把自身撑高、覆盖内容甚至溢出视口。
-
flex-grow: 1必须作用在**需要填充空白区域的中间内容区**（比如main），而不是页脚 - 页脚应设为
flex: none或显式flex-shrink: 0，防止被压缩 - 如果容器是
flex-direction: column，flex-grow影响的是垂直方向延展，但只对“有空间可分”的子项生效；若父容器没高度约束，flex-grow实际无意义
flex: 1 应该加在哪个元素上
标准做法是：把 flex: 1 加在**主内容区**（如 main 或 .content），让它吃掉所有剩余空间，从而把页脚“顶”到最底。
- 父容器必须是
display: flex; flex-direction: column，且有明确高度来源（如min-height: 100vh） - 页脚不能设
height: auto或依赖内容撑高，否则flex: 1无法判断“剩余空间”在哪 - 示例结构：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } main { flex: 1; } footer { height: 60px; }
margin-top: auto 比 flex: 1 更适合粘性底部
当页面结构不止 header / main / footer，还存在多个可变高度区块（比如带标题的卡片组、动态插入的广告位）时，margin-top: auto 更鲁棒——它不依赖“谁来占满”，只关心“最后一个想沉底的元素”。
立即学习“前端免费学习笔记（深入）”；
- 只需给页脚加
margin-top: auto，父容器保持display: flex; flex-direction: column即可 - 无需计算或预设其他子项高度，也不怕中间区块动态增删
- 兼容性好（Chrome 29+、Firefox 20+、Safari 9+），比
grid更稳妥 - 注意：不能和
flex-grow: 1同时用在同一个子项上，后者会覆盖前者的布局效果
容易被忽略的根容器高度链
哪怕写了 min-height: 100vh，如果 html 或 body 的高度未显式继承，Flex 行为仍会退化为内容高度——尤其是嵌套在 Vue/React 根节点（如 #app）里时。
- 必须确保高度链完整：
html { height: 100%; }→body { min-height: 100%; }→ 根 Flex 容器（如#app）也需min-height: 100%或直接height: 100% - 避免在
position: absolute的父容器里用 Flex 粘性底部，绝对定位会脱离文档流，导致高度不可继承 - 移动端 Safari 对
100vh有地址栏缩放问题，可考虑用100dvh（2023 年起支持）替代，但需降级 fallback
