卡片高度不一致的根源是Flex的align-items: stretch在父容器height: auto时失效；需设父容器min-height、清除卡片自身高度限制、用flex-column+flex:1留白，并注意多行时加align-content或改用Grid。
卡片高度不一致，根本不是“没写对齐代码”，而是 Flex 的 align-items: stretch 默认行为被悄悄禁用了。它只在特定条件下才真正起效——多数人卡在这一步，反复调样式却没效果。
父容器必须有可参考的高度
Flex 的拉伸对齐依赖交叉轴（垂直方向）的尺寸基准。如果父容器是 height: auto（绝大多数卡片网格的默认状态），stretch 就不会拉高子项，每张卡片只会按自己内容撑开，结果就是顶部看似齐、底部参差不齐。
- 给父容器加
min-height: 300px或height: 100vh等明确高度值 - 避免用
height: 320px这类固定值，内容超长会被截断；min-height更安全 - 若卡片嵌套在 Grid 或 Bootstrap 列中，确认外层没加
overflow: hidden或高度限制
卡片自身不能设 height/min-height/align-self
哪怕只有一张卡片写了 height: 280px 或 align-self: flex-start，整行其他卡片都会失去 stretch 拉伸资格——浏览器会把这张卡片当作“已定义高度”的例外，其余卡片也跟着按内容自适应。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 检查所有卡片元素，移除
height、min-height、max-height - 显式重置
align-self: stretch（虽然默认就是它，但能排除继承干扰） - 避免在卡片内使用
vertical-align、inline-block或float，这些会破坏文档流和高度计算
内部结构要配合“留出空间”
光靠外部拉伸还不够。如果卡片里文字区域塌陷、图片溢出、按钮浮动，视觉上还是不对齐。关键是要让内容区域“愿意让出空间”，才能被 stretch 真正利用。
- 卡片设
display: flex; flex-direction: column;，并继承父容器高度（如height: 100%） - 文字内容包裹在
.card-body这类独立容器里，并设flex: 1占满剩余空间 - 图片加
max-width: 100%; height: auto;，防止撑破基准高度 - 标题或描述文本加
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;，防长文本顶高卡片
多行布局时补上 align-content
Flex 的 align-items 只管单行内对齐。两行以上卡片，第二行可能被整体“拉开”，导致上下行之间错位。
- 父容器加
align-content: flex-start，防止多行在交叉轴上被分散 - 更稳妥的做法：换用 CSS Grid，比如
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr;——Grid 天然支持同列等高，无需 hack - 如果必须用 Flex（比如需要动态排序或复杂响应逻辑），可 JS 获取最高卡片的
offsetHeight，再统一赋给所有卡片的min-height
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
