CSS Flex能否实现三层嵌套div的等高设置？

嘿，这个三层嵌套下的Flex等高问题我太熟了！要让每行的.title高度完全一致，核心是把整个产品网格的布局逻辑用Flex串起来，而不是只在卡片内部做拉伸。我给你一步步拆解解决方案：

核心思路 #

要实现每行title高度一致，必须保证同一行的所有产品卡片高度完全相同，再通过Flex布局让title区域自动填充卡片内的剩余空间，从而实现视觉上的等高对齐。

具体实现步骤 #

1. 给最外层网格容器设置Flex布局 #

首先，你的产品网格容器需要设置为Flex容器，开启换行，这样每行的卡片会处于同一个Flex上下文，自动对齐高度：

.products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* 可选，控制卡片之间的间距 */
}

Flex默认的align-items: stretch属性会让同一行的所有卡片自动拉伸到最高卡片的高度，这是实现行内卡片等高的基础。

2. 给单个产品卡片设置垂直Flex布局 #

每个产品卡片（第二层div）需要设置为垂直方向的Flex容器，这样内部元素可以按垂直方向分配空间，同时让卡片自适应宽度：

.product-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 280px; /* 1: 允许拉伸，1: 允许收缩，280px: 卡片最小宽度 */
  border: 1px solid #eee;
  padding: 1rem;
}

这里的flex: 1 1 280px能让卡片在容器里自动调整宽度，同时保证每行至少能放下最小宽度的卡片，自动换行。

3. 让Title区域填充剩余空间 #

最后，给.title的父容器（第三层div）设置flex-grow: 1，让它自动填充卡片内图片、价格等元素之外的剩余空间，这样不管title文字多少，所有title的容器高度都会一致：

.title-container {
  flex-grow: 1;
  /* 可选：让title文字顶部对齐，避免不同长度的文字垂直居中错位 */
  display: flex;
  align-items: flex-start;
}

.title {
  margin: 0; /* 去掉默认margin，避免影响布局 */
}

如果你的结构里没有单独的title-container，直接给.title设置flex-grow: 1也可以，但用容器包裹会更灵活（比如后续加副标题等元素）。

关键注意事项 #

• 不要给产品卡片设置固定高度，让Flex自动根据内容和行高调整，否则会破坏等高逻辑
• 如果你的代码里有其他影响布局的属性（比如float），记得移除，Flex和浮动不要混用
• 测试时可以给不同层级的div加临时边框，方便观察布局变化

这样调整后，每行的.title区域就会自动保持高度一致，完美适配电商产品网格的需求！

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