最简洁可靠的方式是给最后一项设 margin-top: auto；因在 column 主轴下，该声明会使其吸收前方剩余空白而贴底，属规范行为，非 hack。
当使用 Flex 布局（display: flex）且设为垂直方向（flex-direction: column）时，若容器高度固定或超出视口，而内容较少，默认会顶部对齐，底部留白。此时想让内容“贴底”，最简洁可靠的方式就是给最后一项（或包裹内容的元素）设置 margin-top: auto。
为什么 margin-top: auto 能贴底？
在 flex 容器中，当主轴是 column 时，margin-top: auto 会让该元素自动吸收其前面所有剩余的空白空间，从而把自己“推”到容器底部。这不是 hack，而是 Flex 布局规范定义的行为。
基本用法：单个内容块贴底
适用于页脚、按钮、提示语等需要沉底的独立区块：
- 容器设
display: flex; flex-direction: column; min-height: 100vh;（确保有足够高度） - 内容区正常写，底部元素加
margin-top: auto;
.container {display: flex; flex-direction: column; min-height: 100vh;} .footer {margin-top: auto;}
多个区块时，控制哪部分贴底
如果页面有头部、主体、底部三部分，想让底部固定在最下方，而主体不撑开：
立即学习 “ 前端免费学习笔记（深入）”；
- 头部和底部用普通样式
- 主体区域设
margin-top: auto; margin-bottom: auto;→ 它会居中 - 只给底部加
margin-top: auto;→ 底部贴底，头部保持原位
注意避坑点
常见失效原因：
- 父容器没设高度（如没写
min-height: 100vh或其他明确高度），flex 无“剩余空间”可分配 - 用了
align-items: flex-end等交叉轴属性，不影响主轴贴底逻辑，但可能干扰视觉效果 - 子元素本身设了
flex: 1或height: 100%，会抢占空间，抵消margin-top: auto效果
基本上就这些。不需要 JS 计算，也不依赖 绝对定位，干净又健壮。
