17370845950

最简洁可靠的方式是给最后一项设 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 计算，也不依赖绝对定位，干净又健壮。