使用 Flexbox 的 align-items: stretch 可实现卡片等高布局，父容器设 display: flex，子元素不设置 height 或 float 等限制属性，最高卡片自动决定所有卡片高度。
在网页布局中，卡片组件常用于展示内容块，比如产品、文章或用户信息。为了让多个卡片看起来整齐美观，通常需要它们具有相同的高度。使用 Flexbox 的 align-items: stretch 可以轻松实现等高排列，无需手动设置固定高度。
Flexbox 默认拉伸特性（align-items: stretch）
Flex 容器中的子元素（flex item）默认会沿交叉轴（cross axis）拉伸，填满容器的最大高度。这意味着只要不设置 height 或 min-height 限制，所有卡片会自动与最高的一项对齐。
关键点：- 父容器需设置 display: flex
- 子元素不要设置阻碍拉伸的属性，如 float、position: absolute 或显式 height
- 确保卡片内容容器未限制高度
基本HTML结构
以下是一个典型的卡片列表结构：
<div class="card-container">
<div class="card">
<h3>标题一</h3>
<p>简短描述。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
<div class="card">
<h3>标题二</h3>
<p>这是一段较长的描述内容，会撑高整个卡片。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div class="card">
<h3>标题三</h3>
<p>中等长度内容。</p>
</div>
</div>
CSS 实现等高卡片
只需几行 CSS 即可实现自动等高：
.card-container {
display: flex;
gap: 16px; /* 卡片间距 */
}
<p>.card {
flex: 1; /<em> 均匀分配空间 </em>/
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
background: #fff;
}
由于 align-items: stretch 是 Flexbox 的默认行为，无需额外声明。容器中最高的卡片会决定所有卡片的高度，其余自动拉伸匹配。
注意事项与常见问题
某些情况下卡片可能不会等高，常见原因包括：
- 设置了 min-height 或 height：会阻止 stretch 行为
- 使用了 float 或 position：脱离正常文档流
- 内部元素 overflow: hidden 或 fixed 高度：影响内容测量
- flex-direction: column：此时 stretch 沿主轴方向不同
若需控制最小高度，建议使用 min-height 而非 height，保留拉伸空间。
基本上就这些。利用 Flexbox 的默认 stretch 特性，可以快速实现响应式等高卡片布局，兼容性好，代码简洁。关键是理解其默认行为并避免干扰因素。
