图片挤压文本的本质是布局模式下空间争夺与基线错位，用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 行为。不复杂但容易忽略细节。
