CSS Flexbox：内容高度不定的卡片内操作按钮垂直对齐实现

核心利用flex纵向布局下的margin-top: auto特性，自动撑开内容下方的剩余空间，完全符合你的所有限制条件。

实现步骤 #

1. 所有卡片外层容器设置横向flex布局，保证所有卡片默认等高
2. 每个卡片（即你要加box-shadow、background的元素）设置为纵向flex布局，内部间距直接通过该元素的padding实现，满足硬性要求
3. 给操作按钮设置margin-top: auto，该属性会自动占满按钮上方的所有空余空间，强制按钮下沉到卡片底部

完整代码示例 #

HTML结构 #

<!-- 卡片横向排列容器 -->
<div class="card-container">
  <!-- 卡片外层，阴影、背景、padding都加在这个元素上 -->
  <div class="card">
    <div class="card-content">
      <h3>卡片标题1</h3>
      <p>短内容演示，仅一行</p>
    </div>
    <button class="action-btn">操作按钮</button>
  </div>
  <div class="card">
    <div class="card-content">
      <h3>卡片标题2</h3>
      <p>长内容演示，多行文本</p>
      <p>长内容演示，多行文本</p>
      <p>长内容演示，多行文本</p>
      <p>长内容演示，多行文本</p>
    </div>
    <button class="action-btn">操作按钮</button>
  </div>
  <div class="card">
    <div class="card-content">
      <h3>卡片标题3</h3>
      <p>中等长度内容演示，共两行</p>
      <p>中等长度内容演示，共两行</p>
    </div>
    <button class="action-btn">操作按钮</button>
  </div>
</div>

CSS样式 #

/* 卡片容器 */
.card-container {
  display: flex;
  gap: 20px;
}

/* 卡片外层，加样式、padding的元素 */
.card {
  width: 280px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  /* 硬性要求的padding间距 */
  padding: 24px;
  /* 内部纵向flex布局 */
  display: flex;
  flex-direction: column;
}

/* 核心：按钮自动撑开上方剩余空间，强制沉底 */
.action-btn {
  margin-top: auto;
  height: 36px;
  background: #4080ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

方案适配说明 #

• 如果按钮上方还有需要跟随在内容底部的元素（比如说明文字、价格标签等），可以将这些元素和按钮套入同一个容器，给该容器加margin-top: auto即可，效果一致
• 无需提前预知卡片内容高度，所有按钮会自动对齐到最高卡片的底部位置
• 完全不需要使用justify-content: space-between，不影响外层元素的样式设置

内容的提问来源于stack exchange，提问作者user3808059