如何在CSS中实现响应式图文混排_Flex Grid结合应用-css教程-PHP中文网

如何在CSS中实现响应式图文混排_Flex Grid结合应用

P粉602998670

发布： 2025-11-17 12:34:02

原创

900人浏览过

响应式图文混排可通过Flexbox和Grid实现。1. Flex适用于左右结构，桌面端并排、移动端堆叠；2. Grid适合多卡片布局，利用auto-fit和minmax自动调整列数；3. 混合使用时，Grid划分区域，Flex处理内部排列，结合媒体查询适配不同屏幕，提升可读性与美观度。

如何在css中实现响应式图文混排_flex grid结合应用

响应式图文混排是现代网页设计中的常见需求，尤其是在移动端优先的背景下。通过结合使用 Flexbox 和 Grid 布局，可以灵活、高效地实现不同屏幕尺寸下的图文排列效果。下面介绍如何合理运用这两种布局方式，构建自适应的图文结构。

1. 使用 Flex 实现基础图文混排

当图文内容为一行一图一文或左右结构时，Flex 是最直观的选择。它支持动态伸缩，适配不同高度和宽度的内容。

示例：左侧图片，右侧文字，移动端堆叠显示

HTML 结构：

<div class="flex-content">
  @@##@@
  <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">
    @@##@@
    <div class="card-text"><h4>标题1</h4><p>描述…</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/788">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679966942334.png" alt="百度AI开放平台">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/788">百度AI开放平台</a>
                            <p>百度提供的综合性AI技术服务平台，汇集了多种AI能力和解决方案</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="百度AI开放平台">
                                <span>105</span>
                            </div>
                        </div>
                        <a href="/ai/788" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="百度AI开放平台">
                        </a>
                    </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">
    @@##@@
    <div class="text-block"><h3>主内容</h3><p>……</p></div>
  </div>
  <div class="side-section">
    <div class="mini-card">@@##@@<p>摘要1</p></div>
    <div class="mini-card">@@##@@<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 擅长二维布局。两者结合，再配合媒体查询，就能实现既美观又响应式的图文混排效果。