在响应式布局的开发场景中，图片与文本重叠是较为常见的布局问题，尤其是当屏幕尺寸发生变化时，元素宽度、排列方式未做适配就容易出现内容堆叠的情况。Flexbox布局方案能够通过弹性规则灵活控制元素的排列与空间分配，从根源上解决这类重叠问题。
问题产生的常见原因
图片与文本重叠通常不是单一因素导致的，常见的触发原因有以下几种：
- 容器未设置弹性规则，子元素默认按文档流排列，小屏幕下宽度不足时就会堆叠
- 图片或文本设置了固定宽度，超出容器范围后覆盖其他元素
- 使用了绝对定位但未做响应式适配，元素脱离文档流后位置计算错误
- 未设置元素的最小宽度或换行规则，空间不足时元素被压缩到同一行
Flexbox核心解决思路
Flexbox通过将容器设置为弹性容器，让内部的图片和文本作为弹性项目，通过几个核心属性的配置即可避免重叠：
display: flex：将容器定义为弹性容器，子元素自动成为弹性项目flex-wrap: wrap：当空间不足时，弹性项目自动换行，避免挤在同一行flex-shrink：控制项目在空间不足时的收缩比例，避免被过度压缩min-width：给图片和文本设置最小宽度，保证内容不会被压缩到无法显示
基础场景解决方案
最常见的场景是图片和文本在同一行排列，小屏幕下需要换行避免重叠，对应的HTML结构和CSS代码如下：
<div class="flex-container">
<img src="https://ipipp.com/demo-img.jpg" alt="示例图片" class="flex-img">
<div class="flex-text">
<h3>示例文本标题</h3>
<p>这是一段示例文本，用于展示Flexbox布局下图片和文本如何避免重叠，当屏幕尺寸变小时，文本会自动换行到图片下方。</p>
</div>
</div>对应的CSS样式配置：
.flex-container {
display: flex;
flex-wrap: wrap; /* 空间不足时换行 */
gap: 20px; /* 元素之间的间距 */
padding: 20px;
box-sizing: border-box;
}
.flex-img {
width: 300px;
height: auto;
flex-shrink: 0; /* 图片不收缩，保持原始比例 */
min-width: 200px; /* 设置最小宽度，避免被过度压缩 */
}
.flex-text {
flex: 1; /* 文本占据剩余空间 */
min-width: 300px; /* 文本最小宽度，小于该值会换行 */
}特殊场景适配方案
如果需要在大屏幕下图片居左文本居右，小屏幕下图片在上文本在下，只需要调整弹性项目的排列方向即可：
/* 大屏幕下保持行排列 */
@media (min-width: 768px) {
.flex-container {
flex-direction: row;
}
}
/* 小屏幕下改为列排列 */
@media (max-width: 767px) {
.flex-container {
flex-direction: column;
}
.flex-img {
width: 100%; /* 小屏幕下图片占满宽度 */
min-width: unset;
}
.flex-text {
min-width: unset;
}
}注意事项
使用Flexbox解决重叠问题时，还需要注意几个细节：
- 容器需要设置
box-sizing: border-box，避免内边距和边框影响宽度计算 - 图片需要设置
height: auto，保证响应式缩放时比例不变形 - 不要给弹性项目设置固定宽度同时又不设置
flex-shrink: 0，否则小屏幕下还是会被压缩重叠 - 如果存在多个文本块，可以给每个文本块设置合理的
flex值，分配剩余空间
通过上述Flexbox的配置方式，基本可以覆盖大部分响应式布局下图片与文本重叠的问题，开发者可以根据实际场景调整对应的属性值，适配不同的设计需求。