用 display: flex + align-items: center 可对齐标题和点赞数，但需解决文字换行、图标尺寸不一致、响应式挤压三类问题：标题设 flex: 1 1 0 + min-width: 0 + white-space: nowrap + overflow: hidden + text-overflow: ellipsis；点赞区设 flex-shrink: 0；图标内联对齐并用 margin 微调；小屏用媒体查询降级字体大小。
直接用 display: flex + align-items: center 就能对齐标题和点赞数，但关键在于处理文字换行、图标尺寸不一致、响应式挤压这三类实际问题。
标题与点赞数横向对齐却错位？检查交叉轴对齐方式
常见错误是只写 display: flex，没设 align-items，导致文字基线和图标顶部不对齐。默认 align-items: stretch 会让子元素拉满容器高度，而图标（如 SVG 或字体图标）往往自带上下空白或垂直偏移。
- 优先用
align-items: center—— 它按交叉轴中点对齐，对文字+图标最稳妥 - 避免用
vertical-align：Flex 项目上该属性已失效 - 如果图标仍偏高/偏低，给图标加
margin-top: -2px微调（比改line-height更可控）
标题过长时点赞数被挤出容器？必须控制换行行为
默认 flex-wrap: nowrap，标题文本撑宽后，点赞数会溢出或被压缩变形，尤其在移动端。
- 给容器加
flex-wrap: wrap，但注意：这会让点赞数掉到第二行——通常不想要 - 更合理做法是限制标题区域：给标题元素设
flex: 1 1 0（即允许收缩、不放大、基础宽度为 0），再配合min-width: 0触发文本截断逻辑 - 搭配
white-space: nowrap; overflow: hidden; text-overflow: ellipsis实现单行省略
点赞数含图标+数字，如何保持紧凑且居中？
直接把图标和数字放在同一标签里（如 <span class="like"><i class="icon"></i> 24</span>）最省事，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 图标用
inline-block或display: flex自身内部对齐，避免依赖父级line-height - 数字和图标之间别用空格，用
margin-right: 4px控制间距，防止换行断裂 - 整个点赞区域建议设
flex-shrink: 0，防止被标题挤压缩窄
移动端窄屏下仍错乱？警惕 gap 和 padding 的累积影响
gap 在 Flex 容器中很香，但老版本 Safari（iOS 14.5 之前）不支持；同时，padding 和 gap 叠加可能让内边距翻倍。
- 用
gap前先确认目标环境，否则退回到margin-right控制子项间距 - 标题和点赞数之间不要同时设容器
gap和子项margin，选其一即可 - 小屏下可加媒体查询：
@media (max-width: 480px) { .title { font-size: 14px; } .like { font-size: 12px; } }
真正卡住人的从来不是“能不能对齐”，而是“对齐后换行怎么不出错”“图标和文字尺寸不一时怎么不飘”“窄屏下间距突然变大”。这些细节没被显式声明，Flex 就会按默认规则默默破坏布局。
