卡片按钮居底需设flex-direction: column；按钮须为卡片直接子元素；按钮容器需单独设flex布局控制间距；卡片父容器应设align-items: stretch并配合min-height确保等高。

卡片本身是 Flex 容器，但按钮仍浮动不居底

常见错误是只给外层卡片设 display: flex，却没指定 flex-direction: column。Flex 默认主轴是水平方向（row），此时 justify-content 控制的是左右对齐，跟“底部”无关。

必须显式声明垂直流向，否则 margin-top: auto 或 align-self: flex-end 都不会生效：

• flex-direction: column 是前提，没有它，所有“推到底部”的操作都无效
• 若卡片高度由内容撑开（无 height 或 min-height），align-items: stretch 实际不起作用——子项不会被拉伸，自然也无法靠底对齐
• 按钮必须是卡片的**直接子元素**；如果按钮嵌套在 <div><div><button></button></div></div> 里，margin-top: auto 要加在最外层那个 <div> 上，而不是 <code><button></button>

  按钮容器内部还要水平排布，怎么嵌套 Flex

  按钮本身需要居中、两端对齐或等距分布时，不能只靠外层卡片的 Flex 设置——那是控制卡片内三段结构（header/body/footer）的，不是控制按钮之间的间距。

  正确做法是：让按钮所在区域（比如 .card-footer）自己成为 Flex 容器：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • .card-footer { display: flex; justify-content: center; gap: 0.5rem; } —— 水平居中 + 间距
  • 若按钮数量动态，用 justify-content: space-between 更稳，避免最后一行只剩一个按钮时左右空荡
  • 别在按钮上直接设 margin 来调位置；Flex 容器内用 gap 更可控，且不干扰 margin-top: auto 的计算逻辑

  为什么 align-self: flex-end 有时不管用

  这个属性只在父容器是 Flex 且主轴方向明确时才有效。它常被误用于两种场景：

  • 父容器是 flex-direction: row，却想让按钮“沉到底部”——此时交叉轴是垂直方向，align-self: flex-end 确实能对齐底部，但前提是卡片有固定高度，否则按钮只是贴着自身容器底边，而非整个卡片视觉底部
  • 按钮不在卡片的直接子级里，而是套了多层 <div> —— <code>align-self 只作用于 Flex 项目的直接子项，嵌套层级会中断作用链
  • 更隐蔽的坑：box-sizing: border-box 没统一，导致内边距/边框影响实际高度计算，按钮看起来偏高或偏低

  响应式下卡片高度不一致，底部还是错位

  这通常不是按钮的问题，而是外层网格容器没处理好“等高”逻辑。即使每个卡片内部按钮都靠底了，不同卡片高度不同，视觉上依然参差。

  关键在卡片的父容器（比如 .card-grid）：

  • 必须设 display: flex; align-items: stretch;，否则卡片各行之间互不影响高度
  • 每张卡片需设 min-height（如 min-height: 240px），仅靠 height: 100% 在 flex-wrap 下不可靠
  • 小屏换行后，align-items: stretch 只对同一行内的卡片生效；跨行对齐需 JS 辅助或改用 CSS Grid

  真正容易被忽略的一点：字体大小、行高、图片加载失败 fallback 高度不一致，都会悄悄破坏卡片视觉等高——这些细节比布局属性更难调试。