卡片排版错位主因是盒模型与布局上下文不匹配，删掉 position: absolute 和 margin-top 魔数即可解决；margin-bottom 更可靠因其不依赖高度、不触发重排且适配响应式；flex 布局中用 margin-top: auto 可稳定吸附图标到底部；文字长度不一致时需设 flex-basis: 100% 和 flex-shrink: 0；最终须优先检查外层容器的 align-items 等对齐设置。

卡片排版错位不是样式没写对，而是盒模型行为和布局上下文没对齐——多数情况删掉 position: absolute 和 margin-top 魔数就能解决。

为什么 margin-bottom 比 position: absolute 更可靠

卡片高度随文本行数浮动时，position: absolute 依赖父容器设 position: relative 且高度固定，但实际中卡片高度不可控；而 margin-bottom 直接统一所有卡片的底部基准线，不依赖内部结构，也不触发重排。

• 只要所有卡片加相同 margin-bottom: 1.25rem，视觉底部就自然对齐
• 配合 CSS 自定义属性（如 --card-spacing: 1.25rem）方便全局调整
• 在 Grid 或 Flex 布局中依然生效，无需改容器 display 类型
• 避免了 bottom: 0 在小屏或字体缩放时导致图标溢出卡片边界的问题

margin-top: auto 实现图标“吸附到底部”

当需要图标严格锚定在卡片内容区底部（而非卡片容器底边），用 Flex 布局比定位更语义化、更稳定。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 给卡片容器设 display: flex; flex-direction: column; height: 100%
• 内容区域加 flex: 1 占满可用空间
• 图标元素加 margin-top: auto，它会把图标“推”到剩余空间最下方
• 注意：若卡片本身没显式高度（如未设 height 或 min-height），flex: 1 可能无效，需结合父级约束

多列卡片中文字长度不一致导致横向错位

标题长短不一使右侧标签（如数量 badge）位置飘移，本质是 flex-basis 默认按内容宽度计算，破坏了容器宽度一致性。

• 给文字容器（如 .card-text）设 flex-basis: 100%，强制占满剩余空间
• 给图标/图片容器加 flex-shrink: 0，防止窄屏下被压缩变形
• 用 justify-content: space-between 替代 transform: translateX() 等 magic number 定位
• 避免在 .card-text 内部再嵌套 Flex，否则层叠的 flex-basis 行为容易互相干扰

真正难处理的不是怎么让图标对齐，而是忘记卡片容器本身是否参与了外层 Grid/Flex 的对齐逻辑——比如父级用了 align-items: start，那再怎么调子元素都没用。先看外层容器的对齐设置，再动卡片内部。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！