最简洁可靠的方式是在列方向容器中给目标子项设置 margin-top: auto；需确保父容器 display: flex 且 flex-direction: column，并有足够高度（如 min-height: 100vh）。
在 Flex 布局中，让某个子项（flex item）固定在容器底部，最简洁可靠的方式就是在 列方向（flex-direction: column） 的容器里，给目标项目设置 margin-top: auto。
前提：容器必须是 column 方向
只有当父容器设为 display: flex 且 flex-direction: column 时，margin-top: auto 才能起作用——它会把剩余空间“吸”到该元素上方，从而把它“顶”到底部。
- ❌ 错误写法（row 方向）：
flex-direction: row→margin-top: auto无效 - ✅ 正确写法：
flex-direction: column→margin-top: auto生效
结构要简单清晰
目标项目应是直接子元素，且前面不要有其他“撑高”的兄弟元素干扰空间分配。常见结构如下：
<div class="container"> <header>头部</header><main>主要内容</main><footer class="stick-bottom">固定在底部</footer> </div>
对应 CSS：
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 确保容器足够高，否则没空间可分 */
}
.stick-bottom {
margin-top: auto;
}
注意高度与内容溢出
如果底部项目本身内容较多，或容器高度不够，margin-top: auto 仍会生效，但可能造成内容被截断或滚动。此时建议：
- 给容器加
min-height（如min-height: 100vh），保证有足够垂直空间 - 避免给底部项目设固定
height或max-height，除非明确需要限制 - 如需始终可见且不随内容变高，可额外加
flex-shrink: 0
替代方案对比（不推荐优先用）
虽然也能实现，但不如 margin-top: auto 简洁自然：
-
align-self: flex-end：只对单个项目有效，但依赖主轴是 column；若主轴是 row，则变成“右对齐”，容易混淆 -
绝对定位（
position: absolute; bottom: 0）：脱离文档流，可能遮挡内容、影响响应式，且需父容器position: relative - 自动外边距 + flex-grow：更复杂，没必要绕弯
基本上就这些。核心就一条：column + margin-top: auto，干净利落。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
