FlexBox等高卡片布局问题：标题换行时元素对齐失效

我尝试用CSS FlexBox实现等高卡片布局，标题单行时布局正常；但标题换行后，尽管卡片高度相等，内部的图片、描述及按钮等元素却无法与其他卡片的对应元素对齐，需要解决这个对齐问题。

正常效果：

异常效果：

现有代码 #

HTML代码

<div class="card">
  <div class="title">iPhone 14 White Pearl</div>
  <div class="img">&nbsp;</div>
  <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <button>Add to Cart</button>
</div>
...（其余卡片代码略）

CSS代码

.container {
  display: grid;
  margin: 30px auto 10px;
  max-width: 1024px; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  flex-basis: 1;
  align-items: stretch;
}
...（其余CSS代码略）

解决方案 #

问题出在卡片内部的Flex布局仅保证了整体高度相等，但未约束各模块的垂直对齐关系。可以通过以下两种方式解决：

方法一：改用Grid布局实现卡片内部结构

将卡片的布局从Flex改为Grid，利用Grid的行列对齐特性，让每个对应模块自动对齐：

.card {
  width: 200px;
  display: grid;
  grid-template-rows: auto 1fr auto auto; /* 标题自动高度，图片占剩余空间，描述、按钮自动高度 */
  gap: 10px; /* 根据需要调整模块间距 */
}

这种方式能让所有卡片的标题、图片、描述、按钮分别处于同一水平线上，无需手动设置高度，适配各种长度的标题。

方法二：优化Flex布局，固定标题区域最小高度

如果想保留Flex布局，可以给标题设置一个足够容纳最长标题的最小高度，确保所有标题区域高度一致，从而让后续元素对齐：

.title {
  min-height: 48px; /* 可根据实际最长标题高度调整 */
  display: flex;
  align-items: center; /* 可选：让标题垂直居中 */
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 可选：将按钮推至卡片底部 */
  gap: 10px;
}

这种方式简单直接，但需要根据内容手动调整最小高度，灵活性稍差。

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