答案：Flex适合简单图文对齐，Grid用于复杂二维布局，多列结合浮动实现文字环绕。示例中Flex通过align-items和gap控制间距与对齐，Grid利用grid-column和grid-row定义区域，多列布局配合float和shape-outside实现报纸式排版。实际项目可组合使用，外层Grid分区、内层Flex排列，关键在于根据内容结构选择合适方案，并注意gap、flex-shrink等细节。
在CSS初级项目中实现图片与文字混排，结合Flex、Grid和多列布局是一种实用且灵活的方式。掌握这些方法能帮助你快速搭建清晰美观的内容区域，比如图文新闻、产品介绍或博客排版。
使用 Flex 布局实现基础图文混排
Flex布局适合处理一维排列，比如让图片和文字在同一行对齐，是初学者最容易上手的方式。
关键点：- 给父容器设置
display: flex，可轻松控制子元素横向或纵向排列 - 使用
align-items控制垂直对齐（如居中） - 图片可通过固定宽度或
flex-shrink: 0防止被压缩
示例代码：
.container {
display: flex;
align-items: center;
gap: 16px;
}
.image {
flex: 0 0 100px; /* 固定宽，不伸缩不收缩 */
}
.text {
flex: 1;
}
这种结构适合头像+简介、图标+说明等常见场景。
立即学习“前端免费学习笔记（深入）”；
用 CSS Grid 实现复杂图文网格
当需要二维布局时，Grid 更加高效。你可以精确控制图片和文字在几行几列中的位置。
- 多图多文交错排版（如杂志风格）
- 希望某张图跨两列，文字环绕其周围
示例：创建一个三列网格，让大图占据左两列，文字在右侧两行显示
.grid-layout {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
}
.big-image {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.text-block-1 {
grid-column: 3;
}
.text-block-2 {
grid-column: 3;
}
这种方式结构清晰，适合内容区块分明的页面。
多列布局（columns）实现文字绕图效果
如果你希望文字像报纸一样围绕图片流动，可以使用 column-count 和浮动结合的方法。
- CSS 多列布局主要用于长文本分栏
- 配合
float: left可实现传统“文字环绕图片”效果
示例：
.article {
column-count: 2;
column-gap: 20px;
}
.float-image {
float: left;
width: 120px;
margin: 0 16px 10px 0;
shape-outside: circle(); /* 可选：让文字沿圆形边缘排列 */
}
此方法适合文章类内容，突出阅读体验。
基本上就这些。Flex 适合简单对齐，Grid 擅长复杂网格，多列+浮动实现环绕。根据内容结构选择合适方案，不必强求一种。实际项目中也可以组合使用，比如外层用 Grid 分区，内部用 Flex 排列图文。关键是理解每种布局的适用场景。不复杂但容易忽略细节，比如 gap 间距和 flex-shrink 行为，多练习就能掌握。
