悠悠楠杉
网站页面
如何在CSS中实现响应式图文混排：Flex与Grid的结合应用
11/24
![]()
首先，我们可以用CSS Grid来划分整体结构。将整个文章容器设置为display: grid，并通过grid-template-areas定义布局区域：
css
.article-container {
display: grid;
grid-template-areas:
"title title"
"keywords keywords"
"description description"
"content content";
gap: 1rem;
padding: 1.5rem;
}
在小屏幕上，这种线性结构最为合理。标题在最上方，关键词紧随其后，接着是描述和正文，图片自然嵌入正文中，形成流畅的阅读流。
当屏幕宽度达到平板或桌面尺寸时，我们希望正文中的图片能够与文字实现侧边环绕。这时，Flexbox就派上了用场。我们可以为图文区块单独封装一个.media-block，并设置：
css
.media-block {
display: flex;
align-items: center;
gap: 1.2rem;
margin: 1.5rem 0;
}
.media-block img {
flex: 0 0 30%;
border-radius: 8px;
max-width: 100%;
height: auto;
}
.media-block .text-content {
flex: 1;
font-size: 1rem;
line-height: 1.6;
}
这里，flex: 0 0 30%确保图片占据固定宽度而不被压缩，flex: 1让文字部分自动填充剩余空间。通过媒体查询，我们可以在大屏下启用这种布局：
css
@media (min-width: 768px) {
.article-container {
grid-template-areas:
"title title"
"keywords keywords"
"description description"
"content content";
grid-template-columns: 1fr;
}
.media-block {
flex-direction: row;
}
}
更进一步，如果希望在特定段落实现“图片居左、文字居右”或反之，可以通过添加类名动态切换：
css
.media-block.reverse {
flex-direction: row-reverse;
}
这样，设计师可以在内容管理系统中选择图片的位置，提升编辑灵活性。
此外，Grid还能用于关键词标签的自动换行布局。关键词通常数量不固定，使用grid配合minmax()函数可实现自适应：
css
.keywords {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 0.5rem;
}
.keyword {
background: #eef2ff;
color: #4f46e5;
padding: 0.3rem 0.6rem;
border-radius: 6px;
font-size: 0.85rem;
text-align: center;
}
这种方式避免了使用inline-block带来的空白问题，也无需JavaScript计算换行。
在整个布局中，我们始终保持语义化结构。HTML依然按照内容逻辑书写，CSS负责表现层的适配。这意味着无论设备如何变化，内容的阅读顺序始终合理，这对无障碍访问和SEO都极为重要。
最终，通过Grid把控整体骨架，Flexbox处理局部对齐，我们构建出一个既稳健又灵活的图文系统。它不依赖框架，原生CSS即可实现，加载轻量，维护简单。更重要的是，它尊重内容本身——图片服务于文字，布局服务于阅读体验，而非相反。
