flex布局中footer不贴底的主因是父容器未撑满视口高度，需为html和body设置min-height: 100vh，.app设display: flex、flex-direction: column和min-height: 100vh，.main设flex: 1，footer无需额外样式。
Flex布局中footer不贴底的常见原因
绝大多数情况不是 flex-direction 搞错了，而是父容器没撑满视口高度。浏览器默认 body 不占满 100vh，子元素用 margin-top: auto 或 margin-bottom: auto 时，根本没空间可“挤”。
- 检查是否给
html和body设置了height: 100%或min-height: 100vh - 确认 flex 容器是直接子元素（比如
.app），且设置了display: flex和flex-direction: column - 避免在 footer 上设固定
height同时又用margin-top: auto—— 这会导致内容区高度计算异常
用 margin-top: auto 实现 footer 贴底的写法
这是最轻量、兼容性最好的方式，不需要 JS，也不依赖 flex-grow。核心是让主体内容“尽可能占满剩余空间”，再把 footer 推到底部。
- 父容器必须设
display: flex+flex-direction: column - 主体内容区（如
.main）加flex: 1或flex-grow: 1（二者等价） - footer 不需要任何 flex 相关样式，但必须紧跟在主体后，且不能设
flex-shrink: 0以外的干扰属性 - 如果主体内容过少，
flex: 1会让它拉伸；如果内容超长，它会自然滚动 —— 这正是预期行为
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1;
}
footer {
/* 什么都不用加 */
}
为什么不用 flex-direction: row 配合 margin-left/right？
横向布局没法让 footer “沉到底部”，因为 margin-left: auto 只能推到行末，不是页面底部。强行用 flex-direction: row 再套一层 column，属于嵌套滥用，增加 DOM 层级和维护成本。
-
flex-direction: row是为水平排列设计的，垂直定位靠它就是方向错配 - 某些旧版 Safari 对多层嵌套 flex 的
margin: auto支持不稳定 - 调试时容易误以为是
justify-content或align-items的问题，实际根源在布局流向
移动端或动态内容下 footer 被顶起怎么办
当键盘弹出、地址栏缩放、或异步加载内容后高度突变，flex: 1 可能来不及重排，导致 footer 浮在半空。这不是 Flex 本身的问题，而是视口高度变化未被监听。
- 不要用
height: 100vh—— 它在 iOS Safari 中常被地址栏遮挡后重算为错误值，改用min-height: 100vh - 避免在 footer 内写死
position: fixed，这会脱离文档流，导致内容被遮盖 - 如果必须响应视口变化（比如聊天页），可用
resize事件监听window，但注意只在必要时触发重排
贴底这件事，关键不在怎么推 footer，而在于让整个 flex 容器有“可分配的高度空间”。很多问题查到最后，都是 html 或 body 缺了那行 min-height: 100vh。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
