通过 Flexbox 的 flex-direction: column 和 justify-content: space-between，结合结构优化，可使不同高度卡片内的按钮始终固定在底部位置。

通过 flexbox 的 `flex-direction: column` 和 `justify-content: space-between`，结合结构优化，可使不同高度卡片内的按钮始终固定在底部位置。

要实现多张卡片中「按钮统一到底部对齐」（即无论标题和正文长短，所有“Read More”按钮都位于卡片底部同一水平线），核心思路是：将卡片整体设为垂直弹性容器，并利用 space-between 将内容与按钮强制分离。

✅ 关键改造点解析

1. .card 设为 display: flex; flex-direction: column
   使卡片内部子元素（图片 + .card-content）沿垂直方向排列，并支持高度分配。

2. .card-content 启用 display: flex; flex-direction: column; justify-content: space-between
   这是关键一步：将 .card-content 内部划分为两部分——上方的标题/段落区域（包裹在

   中），与下方的按钮——并让它们自动撑开间距，确保按钮永远贴底。

3. 新增语义化包裹层

   
   原 HTML 中

   和

   直接平级存在于 .card-content，不利于 space-between 精确控制。需将它们包裹在一个

   

   PigX UI 前端开发

   PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

   下载

   内，作为 flex 容器的第一个子项；按钮作为第二个子项，从而形成「内容区 + 按钮」的二元结构。

4. .card-container 添加 align-items: stretch
   确保所有卡片在 flex 布局中拉伸至相同高度（配合 flex-direction: column 下的子项高度分配）。

? 示例代码（精简整合版）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #f0f0f0;
}

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 100px;
  align-items: stretch; /* 关键：拉伸卡片高度一致 */
}

.card {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  width: 325px;
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 20px;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 内容与按钮强制分居两端 */
  padding: 16px;
  flex: 1; /* 占满剩余空间，确保按钮被推到底部 */
}

.card-content > div { /* 包裹标题与正文的容器 */
  margin-bottom: 16px; /* 可选：微调内容与按钮间距 */
}

.card-content h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.card-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.3;
}

.card-content .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  align-self: flex-start; /* 可选：左对齐按钮 */
}

⚠️ 注意事项

• 不要遗漏 .card-content 的 flex: 1（或 height: 100%），否则 justify-content: space-between 无法生效（容器无高度可分配）；
• 图片默认不参与 flex 高度计算，因此 .card 的 flex-direction: column 能确保图片+内容区整体占位，再由 .card-content 承担弹性分配；
• 若卡片内容极短，按钮可能“悬空”，此时可为 .card-content > div 设置 min-height 或添加 margin-bottom: auto 辅助定位；
• 响应式场景下，建议搭配 @media 限制 .card-container 的最大宽度，避免小屏溢出。

该方案兼容现代浏览器（Chrome 29+、Firefox 28+、Safari 9+），无需 JS，纯 CSS 实现，简洁、健壮且易于维护。