最稳写法是父容器设display:flex，图片加flex-shrink:0和固定宽，文字区域用flex:1；需注意align-items默认stretch导致对齐异常，文字容器应设min-width:0，图片设display:block防悬空。
display: flex，图片加 flex-shrink: 0 和固定宽，文字区域用 flex: 1 —— 这是最稳、最不容易出错的写法。
父容器必须设 display: flex
这是起点，不是可选项。只给图片或文字加 flex 没用，Flex 属性只对直接子元素生效。
- 别把
display: flex写在<img>或<p></p>上——它只作用于容器 - HTML 结构要扁平：图片和文字是同一级子元素，不要嵌套多层
div再试图跨层对齐 - 如果用了
flex-direction: column，那图文就是上下排，不是左右——确认你没误设这个
图片要防压缩，文字要自适应
默认情况下，Flex 会压缩图片（flex-shrink: 1），导致变形；文字容器也可能因内容过长被撑开或溢出。
- 图片加
flex-shrink: 0+ 明确width（比如width: 120px），高度可设height: auto保持比例 - 文字区域用
flex: 1，等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 强烈建议文字容器加
min-width: 0，否则遇到长单词或 URL 时，flex: 1会失效，文字强行撑宽容器
对齐问题大多出在 align-items
默认 align-items: stretch 会让图文高度拉齐，结果文字“吊”在图片底部，看起来像没对齐。
- 想要顶部对齐（最常用）：设
align-items: flex-start - 想要垂直居中：用
align-items: center，但得确保图片是display: block（去掉<img>默认的基线留空） -
vertical-align在 Flex 容器里完全无效，别白费劲
响应式断点别依赖 flex-wrap
想在小屏下变成上下排列？别指望 flex-wrap: wrap 自动把文字换到下一行——它只按子项宽度硬折行，图文关系容易错乱。
- 正确做法是用媒体查询切
flex-direction: column - 同时加
text-align: center让文字居中，避免左对齐显得偏移 - 图片在竖排时可加
margin-bottom: 1rem隔开文字，比靠gap更可控
min-width: 0 和 display: block 这两个细节：前者管文字不撑容器，后者管图片不悬空——没它们，布局看着“差不多”，但一换图、一填长文本就露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
