必须设flex-direction: column，否则margin-top: auto无效；按钮需为直接子元素且设margin-top: auto、width: 100%；卡片容器须有明确高度（如height: 100%或min-height）以提供可分配空间。
Flexbox容器必须设为flex-direction: column
卡片内容要垂直堆叠，操作按钮才能“沉”到底部。如果用默认的 row 方向，所有子元素会水平排列，margin-top: auto 或 align-self: flex-end 都无效。
常见错误是只给卡片加 display: flex，却忘了改方向。必须显式声明：
.card {
display: flex;
flex-direction: column;
height: 100%; /* 关键：父容器需有明确高度，否则 flex 项不占满 */
}
- 若卡片在网格或 Flex 容器中，父级最好设
height: 100%或具体值（如min-height: 200px） - 不设高度时，
flex: 1或margin-top: auto在按钮上可能无反应——因为整个容器没“可分配空间” - 避免对卡片本身用
align-items: flex-end，这会让整列右对齐，不是按钮底部固定
按钮用margin-top: auto最可靠
这是让按钮“吸附”到容器底部的主流做法，比 align-self: flex-end 更稳定，且兼容性更好（支持所有现代浏览器，包括 Safari 10+）。
示例结构：
<div class="card"> <h3 class="card-title">标题</h3> <p class="card-desc">描述文字...</p> <button class="card-action">操作</button> </div>
对应样式：
.card-action {
margin-top: auto;
width: 100%;
}
-
margin-top: auto会把按钮上方所有剩余空间“吃掉”，按钮自然贴底 - 按钮需设
width: 100%（或align-self: stretch），否则默认宽度只包内容，可能看起来没撑满 - 不要给按钮设
flex: 0 0 auto以外的 flex 属性，否则可能干扰自动 margin 的计算
内容区需要flex: 1或最小高度控制溢出
当卡片内容过少时，按钮确实能到底部；但内容过多时，按钮会被顶出视口——这不是 Flexbox 的错，而是没限制内容高度。
解决方式取决于设计需求：
- 允许内容滚动：给内容区（如
.card-desc）设flex: 1; overflow-y: auto - 截断文本：用
display: -webkit-box; -webkit-line-clamp: 3配合overflow: hidden - 强制卡片最小高度：在
.card上设min-height: 240px，确保总有空间留给按钮
注意：不能对整个 .card 设 overflow: hidden，否则按钮可能被裁掉。
响应式下按钮位置偏移？检查flex-wrap和gap
在媒体查询中加了 flex-wrap: wrap 或用了 gap，可能导致按钮换行或间距异常，破坏底部定位。
- 卡片内部禁止用
flex-wrap: wrap（除非你真想让标题、描述、按钮横向排） -
gap在 column 方向等效于row-gap，它会加在所有相邻子项之间，包括按钮上方——这会让按钮离底边变远 - 如果要用间距，推荐对非按钮元素设
margin-bottom，而不是依赖gap - Safari 14.1 之前不支持
gap在 flex 容器中生效，老版本会直接忽略，造成布局意外
按钮底部固定的本质，是让 Flex 容器有“高度上下文”、内容区主动让出空间、按钮利用自动 margin 占据剩余部分——这三个条件缺一不可。最容易被忽略的是第一点：没有显式高度或最小高度，其他都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
