图文混排用Flex布局时，图片设flex-shrink:0固定尺寸，文字区域用flex:1且必须加min-width:0解除最小宽度限制，并配合word-break:break-all处理长文本；父容器设align-items:center实现垂直居中，小屏切column布局。
用 Flex 布局实现图文混排时，让文字区域“优雅地”填满剩余空间，关键不在强行拉伸，而在于控制收缩行为、内容边界和对齐逻辑。核心是：图片固定不缩，文字区域可伸缩但不溢出，且能响应长文本（如 URL、英文单词）。
图片与文字共处一个 flex 容器
结构上必须把图片和文字包裹在同一个 display: flex 父容器里，不能拆成多个独立块——否则无法触发空间协同分配。
- 图片用
<img>，设flex-shrink: 0或flex: 0 0 auto，确保它按自身尺寸渲染，不被压缩 - 文字区域用
<div class="text-content">包裹标题和段落，避免直接放<p>导致样式失控 - 整个容器推荐加
gap: 16px控制图文间距，比用 margin 更干净
文字区域用 flex: 1 配合 min-width: 0
flex: 1 看似简单，但默认会受 min-width: auto 限制——浏览器为防止内容被压扁，会阻止文字区域缩小到文字本身宽度以下，结果就是换行或溢出。
- 正确写法：
.text-content { flex: 1; min-width: 0; } -
min-width: 0解除最小宽度保护，让 flex 分配真正生效 - 若含长英文单词或 URL，再加
word-break: break-all或overflow-wrap: break-word实现软换行
垂直居中与响应式断点处理
图文并排时，用户期望图片和文字视觉上“对齐中心”，尤其当图片高度和文字行高不一致时。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
align-items: center，自动对齐交叉轴（即垂直方向） - 小屏下（如
max-width: 768px），改用flex-direction: column让图文堆叠，并设text-align: center统一居中 - 避免给文字区域设固定
height或line-height过度干预，交由 flex 自然撑开
避免常见陷阱
很多“不生效”其实不是 flex 写错了，而是被隐性规则卡住。
- 别在文字容器里嵌套另一个 flex 容器却忘记设
min-width: 0——子 flex 项同样受父级最小宽度影响 - 不用
float或position: absolute混入 flex 布局，会导致脱离文档流、对齐失效 - 慎用
flex: 1 1 0（即flex-basis: 0）于文字区域——它会抹掉内容原始宽度，可能让短标题也拉得太宽 - 更稳妥的是
flex: 1 1 auto：先按文字自然宽度渲染，再均分剩余空间，更符合直觉
