用flex实现多列产品卡片高度自动平齐，关键是父容器设display: flex、卡片为直接子项且不设固定高，卡片内部用flex-column+height:100%+margin-top:auto锚定底部按钮；跨卡片同级对齐需结构分层，如.title-row等独立行布局。

用 Flex 实现多列产品卡片高度自动平齐，关键不是“拉高所有卡片”，而是让它们在视觉和结构上自然对齐——靠的是容器设置、子项约束释放，以及内部内容的弹性锚定。

父容器必须设为 display: flex

卡片的直接父容器（比如 .card-grid）要声明：
display: flex;
align-items: stretch;（这是默认值，可不写）
gap: 1.5rem;（推荐用 gap 替代 margin，避免外边距合并）

注意：只有直接子元素才受 stretch 影响。如果卡片外面套了多余的 div 或用了 flex-wrap，就容易失效。

• 别给卡片本身设 height、min-height 或 max-height —— 这会直接打断拉伸逻辑
• 确保卡片是父容器的**直接子项**，中间不要插无关 wrapper
• 如果需要换行，flex-wrap: wrap 会导致跨行不等高，此时应改用 DOM 分组（每行单独一个 flex 容器）

每张卡片内部要用 column flex 布局

单个卡片（如 .card）需设：
display: flex;
flex-direction: column;
height: 100%;（配合父级 stretch 才能生效）

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

这样卡片内各区块才能按需分配垂直空间，尤其是让底部按钮稳住位置。

• 标题和描述保持正常文档流，不加 height、不设 position
• 把按钮放在最后，并加 margin-top: auto，它就会自动“吸”到底部
• 如果按钮上方还有其他区域（比如 .info），给它设 flex: 1，让它撑满剩余高度

标题/地址等同级区块想跨列对齐？得结构分层

如果不仅卡片整体要等高，还要求三列的标题区、地址区、描述区各自严格对齐，纯 CSS 无法跨卡片控制同级元素。可靠做法是把语义相同的区块抽出来，单独成行：

• 用 <div class="title-row"> 包住所有卡片的标题，设为水平 flex 容器 → 自动等高 <li>同理建 <code>.address-row、.desc-row，每行内三个区块并排拉伸
• 再把整套结构组合进卡片网格中，视觉上就是“列列对齐”，且响应式友好

常见踩坑点

很多“不等高”其实不是 Flex 失效，而是被以下操作悄悄破坏了：

• 卡片里用了 position: absolute 的标题或按钮 —— 内容脱离文档流，不参与高度计算
• 轮播容器（如 Swiper）没设明确高度上下文（比如 height: 100vh 或 min-height），导致卡片无基准可拉伸
• 误信 flex-wrap 能跨行对齐 —— 它只在当前行内 stretch，第二行会重新找最高项