响应式图文混排可通过Flexbox和Grid实现。1. Flex适用于左右结构，桌面端并排、移动端堆叠；2. Grid适合多卡片布局，利用auto-fit和minmax自动调整列数；3. 混合使用时，Grid划分区域，Flex处理内部排列，结合媒体查询适配不同屏幕，提升可读性与美观度。
响应式图文混排是现代网页设计中的常见需求，尤其是在移动端优先的背景下。通过结合使用 Flexbox 和 Grid 布局，可以灵活、高效地实现不同屏幕尺寸下的图文排列效果。下面介绍如何合理运用这两种布局方式，构建自适应的图文结构。
1. 使用 Flex 实现基础图文混排
当图文内容为一行一图一文或左右结构时，Flex 是最直观的选择。它支持动态伸缩，适配不同高度和宽度的内容。
示例：左侧图片，右侧文字，移动端堆叠显示HTML 结构：
<div class="flex-content">
<img src="image.jpg" alt="示例图片" class="flex-image">
<div class="flex-text">
<h3>标题</h3>
<p>这是一段描述性文字……</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
</div>
CSS 样式：
.flex-content {
display: flex;
gap: 20px;
align-items: center;
}
<p>.flex-image {
width: 50%;
height: auto;
border-radius: 8px;
}</p><p>.flex-text {
flex: 1;
}</p><p>@media (max-width: 768px) {
.flex-content {
flex-direction: column;
}
.flex-image {
width: 100%;
}
}
说明：在桌面端并排显示，移动端自动转为上下堆叠，图片占满容器宽度，保证可读性。
2. 使用 Grid 构建多图文章布局
对于包含多个图文模块的卡片式布局（如博客列表、产品展示），CSS Grid 更具优势，能精准控制行列结构。
示例：三列图文卡片，随屏幕缩小自动调整列数HTML 结构：
<div class="grid-layout">
<div class="card">
<img src="img1.jpg" alt="图1">
<div class="card-text"><h4>标题1</h4><p>描述…</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div>
</div>
<!-- 更多 card -->
</div>
CSS 样式：
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
<p>.card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
}</p><p>.card-text {
margin-top: 10px;
}
说明：auto-fit 配合 minmax() 实现自动换行，最小宽度 280px，确保小屏下仍保持良好阅读体验。
3. Flex 与 Grid 协同工作场景
实际项目中，常需组合使用两者。例如用 Grid 划分整体区域，内部用 Flex 排列元素。
示例：左侧主图+文字，右侧两行小图<div class="hybrid-layout">
<div class="main-section">
<img src="main.jpg" alt="如何在CSS中实现响应式图文混排_Flex Grid结合应用" >
<div class="text-block"><h3>主内容</h3><p>……</p></div>
</div>
<div class="side-section">
<div class="mini-card"><img src="t1.jpg" alt="如何在CSS中实现响应式图文混排_Flex Grid结合应用" ><p>摘要1</p></div>
<div class="mini-card"><img src="t2.jpg" alt="如何在CSS中实现响应式图文混排_Flex Grid结合应用" ><p>摘要2</p></div>
</div>
</div>
CSS：
.hybrid-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
<p>.main-section {
display: flex;
flex-direction: column;
gap: 12px;
}</p><p>.side-section {
display: flex;
flex-direction: column;
gap: 16px;
}</p><p>.mini-card img {
width: 100%;
height: 90px;
object-fit: cover;
border-radius: 6px;
}</p><p>@media (max-width: 768px) {
.hybrid-layout {
grid-template-columns: 1fr;
}
}
说明：大屏采用网格划分主次区域，内部用 Flex 控制图文顺序和间距；小屏下主结构变为单列，保持清晰层级。
基本上就这些。关键在于根据内容结构选择合适的布局模型——Flex 擅长一维排列，Grid 擅长二维布局。两者结合，再配合媒体查询，就能实现既美观又响应式的图文混排效果。
