使用Flexbox和Grid可高效实现图文混排布局。1. Flex适用于左右排列，通过display: flex、align-items: center实现图片与文字的水平及垂直对齐，适合简单一维结构；2. Grid用于多行多列布局，利用grid-template-columns配合minmax实现响应式自动换行，适合相册、信息面板等复杂场景；3. 混合使用时，外层用Grid划分整体结构，内层用Flex处理项目内部排布，如三栏图文列表；4. 关键细节包括object-fit控制图片裁剪、gap设置间距、响应式断点适配不同屏幕，提升视觉效果与维护性。
图片和文字混排是网页设计中常见的布局需求，比如图文卡片、新闻列表、产品介绍等。使用现代CSS布局方式如Flexbox和Grid，可以轻松实现灵活、响应式的图文混排效果。下面通过实际例子说明如何用Flex和Grid实现这类布局。
使用Flexbox实现图文左右排列
Flex布局非常适合处理一维排列场景，比如让图片在左、文字在右（或反之），且内容垂直居中对齐。
HTML结构：
<div class="flex-layout">
<img src="example.jpg" alt="示例图片" class="flex-image">
<div class="flex-text">
<h3>标题内容</h3>
<p>这里是描述文字，用于配合图片进行说明……</p>
</div>
</div>
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.flex-layout {display: flex;
align-items: center;
gap: 16px;
padding: 16px;
border: 1px solid #ddd;
}
.flex-image {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 8px;
}
.flex-text h3 { margin: 0 0 8px; }
.flex-text p { margin: 0; color: #555; }
说明：通过 display: flex 启用弹性布局，align-items: center 实现垂直居中，gap 控制间距。图片固定尺寸并保持比例裁剪显示，适合头像、商品缩略图等场景。
使用Grid实现更复杂的图文网格布局
当需要多行多列的图文排列时，比如相册配文、信息面板，CSS Grid 更加合适。
HTML结构：
<div class="grid-layout"><div class="grid-item">
<img src="pic1.jpg" alt="图1">
<div class="caption">图片一说明</div>
</div>
<div class="grid-item">
<img src="pic2.jpg" alt="图2">
<div class="caption">图片二说明</div>
</div>
<!-- 更多项目 -->
</div>
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.grid-layout {display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
padding: 16px;
}
.grid-item {
display: flex;
flex-direction: column;
}
.grid-item img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 8px;
}
.caption {
margin-top: 8px;
text-align: center;
font-size: 14px;
color: #444;
}
说明：grid-template-columns 使用 minmax() 和 auto-fit 实现响应式列数自适应，容器宽度足够时自动换行排列。每个项目内部仍可用Flex垂直排列图片与标题。
结合Flex与Grid的混合布局技巧
实际开发中，常将Grid用于整体页面分区，Flex用于局部组件内部排布。
例如一个图文列表页：外层用Grid分成三栏，每栏内的每项内容用Flex排列图片与文字。
.page-layout {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.list-item {
display: flex;
gap: 12px;
align-items: center;
padding: 12px;
border-bottom: 1px solid #eee;
}
这种组合兼顾结构清晰与灵活性，适用于仪表盘、文章摘要列表等复杂界面。
基本上就这些。掌握 Flex 和 Grid 的核心特性后，图片与文字的混排布局可以非常简洁高效地实现，同时具备良好的可维护性和响应能力。不复杂但容易忽略的是细节控制，比如 object-fit、gap 和响应式断点设置，合理使用能让视觉效果更专业。
