通过 Flexbox 的 flex-direction: column 和 justify-content: space-between，结合结构优化，可使不同高度卡片内的按钮始终固定在底部位置。
通过 flexbox 的 `flex-direction: column` 和 `justify-content: space-between`，结合结构优化，可使不同高度卡片内的按钮始终固定在底部位置。
要实现多张卡片中「按钮统一到底部对齐」（即无论标题和正文长短，所有“Read More”按钮都位于卡片底部同一水平线），核心思路是：将卡片整体设为垂直弹性容器，并利用 space-between 将内容与按钮强制分离。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
✅ 关键改造点解析
.card 设为 display: flex; flex-direction: column
使卡片内部子元素（图片 + .card-content）沿垂直方向排列，并支持高度分配。.card-content 启用 display: flex; flex-direction: column; justify-content: space-between
这是关键一步：将 .card-content 内部划分为两部分——上方的标题/段落区域（包裹在 <div> 中），与下方的按钮——并让它们自动撑开间距，确保按钮永远贴底。新增语义化包裹层 <div>
原 HTML 中 <h3> 和 <p> 直接平级存在于 .card-content，不利于 space-between 精确控制。需将它们包裹在一个 <div> 内，作为 flex 容器的第一个子项；按钮作为第二个子项，从而形成「内容区 + 按钮」的二元结构。.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 实现，简洁、健壮且易于维护。
