图片挤压文本的本质是布局模式下空间争夺与基线错位，用flex布局可解，关键在于精准控制主轴方向、对齐方式及子项的flex-grow、flex-shrink、flex-basis行为。
图片挤压文本，本质是默认的 inline 或 
block 布局下，图片和文字争夺空间、基线对齐混乱或父容器未合理分配尺寸导致的。用 display: flex 是简洁有效的解法，关键不在“用了flex”，而在**控制主轴方向、对齐方式和子项伸缩行为**。
适用于头像+昵称、图标+说明文字等场景。给父容器设 display: flex，再用 flex: 1 让两者平分可用空间：
display: flex
flex: 0 0 auto（不放大不缩小，按原尺寸）或 flex: 0 0 60px（固定宽）flex: 1（占满剩余空间）这样图片不会撑开文本，文本也不会被挤到下一行，还能自适应容器变化。
常见于卡片标题区、列表项。不用浮动，用 flex 的 align-items 和 gap 更干净：
立即学习“前端免费学习笔记（深入）”；
display: flex; align-items: center; gap: 12px
flex-shrink: 0（禁止压缩，避免小屏时被压扁）overflow: hidden; text-overflow: ellipsis; white-space: nowrap（防溢出）即使文本很长，也会在图片旁优雅截断，不会换行或重叠。
默认 是 inline 元素，底部留白，导致和文字不对齐。Flex 天然解决这个问题：
display: flex; align-items: center
vertical-align 或 line-height
height: 1.2em 或 max-height: 100% 保持比例所有子项（包括文字、span、img）会严格按内容中线对齐，视觉更稳。
基本上就这些。核心不是“用了flex”，而是明确每个子项的 flex-grow、flex-shrink 和 flex-basis 行为。不复杂但容易忽略细节。