社交卡片底部按钮用gap“看起来没对齐”是因为gap只控制间隙，不控制对齐；需在按钮组容器上显式设置justify-content（如center或space-between）和align-items: center，并确保父容器为flex上下文，否则gap无效。

为什么社交卡片底部按钮用 gap 会“看起来没对齐” 常见现象是：卡片内按钮用了 gap: 8px，但左侧按钮贴左、右侧按钮贴右，中间按钮间距正常，整体像被“撑开”了。这不是 gap 错了，而是父容器没设 justify-content。gap 只管“间隙”，不管“位置”。按钮默认是 flex-start 对齐，所以首尾紧贴容器边缘。

• 卡片容器必须设 display: flex 且方向为 flex-direction: column
• 按钮组需额外包裹一层（比如 .card-actions），并设 display: flex
• 按钮组上加 justify-content: center 或 justify-content: space-between 才能控制水平分布
• 若按钮宽度不一（比如带图标+文字 vs 纯图标），统一设 flex-shrink: 0 防止压缩

按钮高度不一致导致垂直错位怎么办 社交卡片里常混用文字按钮（如“点赞”）、图标按钮（❤️）、带徽标按钮（“分享 2”），它们的 line-height、font-size、padding 不同，flex 默认按 baseline 对齐，视觉上就“一高一低”。

• 给按钮组容器加 align-items: center
• 所有按钮统一设 box-sizing: border-box 和固定 height（如 height: 36px）
• 避免仅靠 padding 控制高度——不同字体渲染下 padding 实际占位可能偏移
• 图标按钮建议用 inline SVG 或 ::before 伪元素，而非 img 标签，减少基线干扰

响应式下按钮从横排变竖排，gap 还生效吗 会，但需要主动切换 flex-direction，不能只靠 gap 自动适配。

• 默认横排：按钮组设 flex-direction: row; gap: 8px
• 小屏竖排：媒体查询中改 flex-direction: column; gap: 6px（竖排通常需更小 gap 避免过长）
• 别忘了给按钮设 width: 100% 或 flex: 1，否则竖排时可能缩成窄条
• 如果按钮内含文字，竖排时建议加 text-align: center，避免左对齐显得松散

Safari 15.6 以下版本 gap 失效，怎么兜底 Safari 15.6 及更早不支持单值 gap: 8px，也不支持双值 gap: 8px 12px，但支持分开写的 row-gap 和 column-gap。

• 始终用 row-gap: 8px; column-gap: 8px; 替代 gap: 8px
• 不要在同一规则里混用 gap 和 row-gap，层叠行为不可控
• 旧版 Safari 会静默忽略不支持的 gap 写法，不会报错，所以必须手动测试或用 JS 检测：if ('gap' in document.documentElement.style) {...}
• 真正难的不是兼容 gap，而是当设计要求“主按钮用 12px 间距、辅助按钮组用 4px”时，得意识到 gap 是容器级统一值——只能拆成两个独立 flex 容器，别试图用 :nth-child() 去 hack 间距

实际排布中最容易被忽略的，是按钮组容器本身是否参与了外层卡片的 flex 布局。如果卡片用 grid 实现，而按钮组直接写在 grid item 里却没设 display: flex，那 gap 就完全不生效——它连 flex 上下文都没有。

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

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

下载

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