如何实现卡片及内部标题、描述、按钮的等高布局？

嘿，这个需求完全可以用纯CSS实现，不用任何JavaScript！核心就是让每个卡片内部也变成垂直方向的Flex容器，再给需要等高的子元素设置合适的flex属性，就能强制它们的容器高度统一。

具体实现思路 #

1. 先确保外层的卡片列表已经是Flex容器（你应该已经做到了），这样所有卡片会自动获得整体等高的效果。
2. 给每个卡片添加display: flex; flex-direction: column;，让内部元素垂直排列，并且继承外层Flex带来的100%高度。
3. 对标题、描述这些需要单独等高的元素，设置flex: 1（或按需求调整比例），这样它们会自动填充卡片内的剩余空间，所有对应元素的容器高度会和最长/最高的那个保持一致。
4. 给按钮区域设置flex-shrink: 0，避免按钮被压缩，保证它始终固定在卡片底部。

修改后的代码示例 #

<div class="card-list">
  <div class="card">
    <h3 class="card-title">这是一个短标题</h3>
    <p class="card-desc">这是一段简短的描述文本，内容不多。</p>
    <button class="card-button">查看详情</button>
  </div>
  <div class="card">
    <h3 class="card-title">这是一个非常非常长的标题，会自动换行成好几行，用来测试等高效果</h3>
    <p class="card-desc">这是一段较长的描述文本，内容比上面的多很多，用来验证描述区域是否也能保持等高。我们可以多写几句，让它占据更多的行数。</p>
    <button class="card-button">查看详情</button>
  </div>
  <div class="card">
    <h3 class="card-title">中等长度的标题，测试单行和多行的混合场景</h3>
    <p class="card-desc">中等长度的描述，不多不少，刚好合适。</p>
    <button class="card-button">查看详情</button>
  </div>
</div>

.card-list {
  display: flex;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1 0 280px; /* 自适应宽度，最小280px */
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.card-title {
  flex: 1;
  margin: 0 0 12px 0;
  display: flex;
  align-items: flex-start; /* 确保标题文本顶部对齐，不会垂直居中 */
  font-size: 1.2rem;
}

.card-desc {
  flex: 2; /* 可根据需求调整比例，比如和标题用相同的flex:1 */
  margin: 0 0 16px 0;
  display: flex;
  align-items: flex-start;
  color: #666;
  line-height: 1.5;
}

.card-button {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

效果说明 #

因为每个卡片都是垂直方向的Flex容器，且卡片本身已经被外层Flex拉伸到等高。当给标题、描述设置flex:1时，它们会自动填充卡片内的剩余空间，所有同类型元素的容器高度会被强制拉平到和最高的那个一致——哪怕内容是动态的，单行或多行都能完美适配。

如果不需要标题和描述的比例差异，也可以给它们都设置flex:1，这样会平分卡片除按钮外的空间，同样能实现对应元素等高的效果。

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