在网页开发过程中，图片和文本的搭配布局是非常常见的场景，比如产品展示卡片、文章列表、团队介绍模块等。传统的浮动或者定位布局需要写很多媒体查询来调整不同屏幕尺寸下的排列规则，而CSS Flexbox弹性布局模型可以很轻松地实现这类响应式布局，减少大量冗余代码。
Flexbox布局核心概念
Flexbox布局的核心是弹性容器和弹性子项。当我们把一个元素设置为display: flex之后，这个元素就变成了弹性容器，它的直接子元素会自动成为弹性子项，这些子项会按照Flexbox的规则进行排列。
Flexbox有两个核心轴：主轴和交叉轴。默认情况下主轴是水平方向，交叉轴是垂直方向，我们可以通过flex-direction属性调整主轴的方向。
实现图片文本响应式布局的基础配置
要实现图片和文本的响应式布局，首先需要给包裹图片和文本的父容器设置Flexbox相关属性，常见的配置如下：
/* 父容器基础样式 */
.container {
display: flex;
/* 当子项总宽度超过容器宽度时自动换行 */
flex-wrap: wrap;
/* 子项在主轴方向的对齐方式，space-between表示两端对齐 */
justify-content: space-between;
/* 子项在交叉轴方向的对齐方式，center表示垂直居中 */
align-items: center;
/* 容器内边距，避免内容贴边 */
padding: 20px;
/* 容器最大宽度，防止在大屏幕上过宽 */
max-width: 1200px;
margin: 0 auto;
}
/* 图片子项样式 */
.img-item {
/* 设置图片最大宽度，避免图片过大 */
max-width: 400px;
/* 图片宽度占父容器的45%，留出间距 */
flex: 0 0 45%;
margin-bottom: 20px;
}
.img-item img {
/* 图片宽度占满自身容器 */
width: 100%;
/* 保持图片比例 */
height: auto;
/* 图片圆角 */
border-radius: 8px;
}
/* 文本子项样式 */
.text-item {
/* 文本宽度占父容器的45% */
flex: 0 0 45%;
margin-bottom: 20px;
}
.text-item h3 {
font-size: 24px;
margin-bottom: 10px;
}
.text-item p {
font-size: 16px;
line-height: 1.6;
color: #333;
}
不同场景的布局调整
场景1：大屏幕并排，小屏幕上下排列
上面的基础配置已经可以实现大屏幕下图片和文本并排，小屏幕下自动换行的效果。如果希望在小屏幕下图片在上文本在下，不需要额外调整顺序，因为默认情况下子项会按照HTML的书写顺序排列，换行后自然就是上下结构。
如果需要在小屏幕下文本在上图片在下，可以给文本子项添加order属性，order值越小的子项排列越靠前：
/* 媒体查询，屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
.img-item {
/* 小屏幕下图片占满整行 */
flex: 0 0 100%;
/* 调整order值，让图片排在后面 */
order: 2;
}
.text-item {
/* 小屏幕下文本占满整行 */
flex: 0 0 100%;
/* 文本排在前面 */
order: 1;
}
}
场景2：图片和文本等比例缩放
如果希望图片和文本的宽度按照固定比例分配，比如大屏幕下图片占30%，文本占70%，可以调整flex属性的值：
/* 大屏幕下图片占30%，文本占70% */
@media (min-width: 992px) {
.img-item {
flex: 0 0 30%;
}
.text-item {
flex: 0 0 70%;
}
}
完整示例代码
下面是一个完整的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;
}
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.img-item {
flex: 0 0 45%;
max-width: 400px;
margin-bottom: 20px;
}
.img-item img {
width: 100%;
height: auto;
border-radius: 8px;
}
.text-item {
flex: 0 0 45%;
margin-bottom: 20px;
}
.text-item h3 {
font-size: 24px;
margin-bottom: 15px;
color: #222;
}
.text-item p {
font-size: 16px;
line-height: 1.8;
color: #555;
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
.img-item, .text-item {
flex: 0 0 100%;
max-width: 100%;
}
.text-item h3 {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="img-item">
<img src="https://picsum.photos/400/300?random=2" alt="示例图片">
</div>
<div class="text-item">
<h3>Flexbox布局的优势</h3>
<p>Flexbox布局可以轻松实现子元素的对齐、排序和尺寸调整，不需要复杂的浮动和定位计算。在响应式布局中，只需要少量媒体查询就可以适配不同屏幕尺寸，大大提升了开发效率。</p>
<p>相比传统布局方式，Flexbox的适配逻辑更清晰，代码可维护性更高，是现代网页开发中实现弹性布局的首选方案。</p>
</div>
</div>
</body>
</html>
常见问题说明
- 如果图片变形，需要检查是否给图片设置了固定的高度，应该设置
height: auto保持图片原始比例。 - 如果子项没有换行，需要确认父容器是否设置了
flex-wrap: wrap，默认情况下flex-wrap的值是nowrap，子项不会自动换行。 - 如果子项之间的间距不均匀，可以调整
justify-content的值，或者使用gap属性设置子项之间的固定间距，比如gap: 20px。
CSS_Flexbox响应式布局图片文本布局flex属性修改时间：2026-07-08 21:33:41