在前端页面开发中，使用Flexbox实现响应式布局时，图片与文本重叠是很多开发者都会遇到的典型问题，这种情况大多出现在屏幕宽度缩小的场景下，影响页面的可读性和美观度。
问题出现的常见原因
图片与文本重叠通常不是Flexbox本身的问题，而是属性配置不合理导致的，常见原因有以下几种：
- Flex容器没有设置合适的换行规则，当子元素总宽度超过容器宽度时，元素被强制压缩在同一行
- 图片没有设置最大宽度限制，在小屏幕上图片宽度超出预期，挤压文本空间
- 没有设置响应式断点，在移动端屏幕下仍然使用桌面端的Flex布局规则
- 子元素设置了固定的宽度，无法根据容器宽度自适应调整
Flexbox核心属性适配方案
要解决重叠问题，需要合理运用Flexbox的几个核心属性，结合响应式断点调整布局规则。
1. 基础容器配置
首先给外层容器设置display: flex，同时添加换行规则，避免子元素被强制压缩在同一行：
/* 外层Flex容器基础样式 */
.flex-container {
display: flex;
/* 当子元素总宽度超过容器宽度时自动换行 */
flex-wrap: wrap;
/* 子元素水平方向对齐方式 */
justify-content: center;
/* 子元素垂直方向对齐方式 */
align-items: center;
gap: 20px;
padding: 20px;
width: 100%;
box-sizing: border-box;
}2. 图片元素自适应设置
图片需要设置最大宽度，避免在小屏幕上超出容器范围，同时保证图片比例正常：
/* 图片样式 */
.flex-img {
/* 图片最大宽度不超过容器的一半，可根据需求调整 */
max-width: 50%;
/* 高度自适应，保持图片原始比例 */
height: auto;
/* 防止图片被过度压缩 */
flex-shrink: 0;
}3. 文本容器自适应设置
文本容器需要设置合适的伸缩规则，在剩余空间内自适应调整宽度：
/* 文本容器样式 */
.flex-text {
/* 文本容器最小宽度，避免被压缩到太小 */
min-width: 300px;
/* 占据剩余可用空间 */
flex-grow: 1;
line-height: 1.6;
}完整响应式示例
结合上面的样式，完整的HTML和CSS代码如下，在大屏幕下图片和文本并排显示，小屏幕下自动换行排列，不会出现重叠：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox响应式布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
padding: 20px;
width: 100%;
}
.flex-img {
max-width: 50%;
height: auto;
flex-shrink: 0;
border-radius: 8px;
}
.flex-text {
min-width: 300px;
flex-grow: 1;
line-height: 1.6;
color: #333;
}
/* 移动端断点适配，屏幕宽度小于768px时调整图片最大宽度 */
@media screen and (max-width: 768px) {
.flex-img {
max-width: 100%;
}
.flex-text {
min-width: 100%;
}
}
</style>
</head>
<body>
<div class="flex-container">
<img class="flex-img" src="https://ipipp.com/default-image.jpg" alt="示例图片">
<div class="flex-text">
<h3>Flexbox响应式布局介绍</h3>
<p>Flexbox是CSS3中引入的弹性布局模型，能够轻松实现各种复杂的页面布局效果，尤其在响应式场景中表现优异。通过合理设置Flex相关属性，可以让页面元素在不同屏幕尺寸下自动调整排列规则，避免出现内容重叠、溢出等问题，提升用户的浏览体验。</p>
</div>
</div>
</body>
</html>注意事项
在实际开发中还需要注意以下几点，避免其他布局问题：
- 如果图片是背景图，需要使用
background-size: cover或者contain属性，避免背景图溢出容器 - 文本内部如果有长单词或者链接，需要设置
word-wrap: break-word，避免文本溢出容器 - 测试时需要覆盖多种屏幕尺寸，包括平板、手机等不同设备，确保所有场景下布局正常