使用Flexbox和Grid可高效实现图文混排。1. Flexbox适合左右布局，通过flex、gap和align-items控制对齐与间距；2. Grid适用于多图交错的复杂网格，利用grid-template-columns和选择器实现视觉交替；3. 混合使用时，Grid构建整体结构，Flex处理局部排版；4. 响应式需适配移动端，如改用column方向、单列布局及调整图片尺寸。关键在于根据内容选择合适模型并注重对齐、断点与语义。
在现代网页设计中，图片和文字的混排布局非常常见，比如新闻卡片、产品展示、图文列表等。利用CSS的Flexbox和Grid布局，可以高效、灵活地实现这些效果。下面介绍几种实用的混合排版方式。
1. 使用Flexbox实现左右图文布局
当图片在左、文字在右（或反之）时，Flexbox 是最直观的选择。通过设置容器为 flex，可以轻松控制对齐与响应式行为。
示例代码：
.container {
display: flex;
align-items: center; /* 垂直居中 */
gap: 16px;
}
.image {
flex: 0 0 120px; / 固定宽度，不伸缩 /
height: 120px;
}
.text {
flex: 1; / 占据剩余空间 /
}
说明：使用 flex: 0 0 120px 可防止图片被压缩，gap 提供间距，align-items 控制垂直对齐。这种结构适合文章摘要或用户信息行。
立即学习“前端免费学习笔记（深入）”；
2. 使用Grid实现多图文章网格
对于多张图片与文字交错的复杂布局，比如博客首页或画廊页面，CSS Grid 更具优势。它允许你定义明确的行和列，并将图文元素精准放置。
示例：两列网格，奇数项图片在左，偶数项图片在右
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.article {
display: contents; / 不打断Grid结构 /
}
.article:nth-child(odd) .image {
grid-column: 1;
}
.article:nth-child(odd) .text {
grid-column: 2;
}
.article:nth-child(even) .image {
grid-column: 2;
}
.article:nth-child(even) .text {
grid-column: 1;
}
这种方式让内容顺序保持一致（利于SEO和可访问性），视觉上却交替排列，提升阅读节奏感。
3. Flex + Grid 混合使用场景
实际项目中，常在一个Grid整体布局内，局部使用Flexbox处理图文组合。例如：Grid划分页面区域，每个区域内用Flex排版内容。
典型结构：
- 页面整体用 Grid 划分为 header、sidebar、main、footer
- main 中的文章列表项使用 Flex 实现每项的图文并排
- 每个文章项内部再用 Flex 排列标题、摘要、作者信息
这样既保证了宏观布局的清晰，又提升了组件内部的灵活性。
4. 响应式处理建议
无论使用 Flex 还是 Grid，响应式都是关键。常见策略包括：
- 移动端将左右布局改为上下堆叠：设置 flex-direction: column
- Grid 在小屏下改为单列：grid-template-columns: 1fr
- 使用 max-width 配合 object-fit: cover 确保图片不变形
- 利用 @media 查询调整 gap 和字体大小
例如，在手机上让图片在上、文字在下：
@media (max-width: 768px) {
.container {
flex-direction: column;
text-align: center;
}
.image {
margin-bottom: 12px;
}
}
基本上就这些。Flexbox 适合线性排列的图文组合，Grid 更擅长复杂网格结构，两者结合能应对大多数混排需求。关键是根据内容结构选择合适模型，并做好响应式适配。不复杂但容易忽略细节，比如对齐、断点和语义结构。
