使用Flexbox和Grid实现响应式图文混排，通过flex-wrap、media查询和max-width:100%确保多设备适配，结合float或shape-outside优化文字环绕，提升布局灵活性与可读性。
在网页设计中，图片与文字的混排是常见布局方式。响应式设计要求内容在不同设备上都能良好展示，以下是几种优化技巧，帮助你实现更灵活、美观的响应式图文混排。
使用Flexbox实现自适应布局
Flexbox 是实现响应式图文混排最有效的方式之一。它能自动调整子元素的大小和位置，适配不同屏幕尺寸。
示例：让图片居左，文字靠右，并在小屏幕上堆叠排列。
.container {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.image {
flex: 0 0 30%;
max-width: 30%;
}
.text {
flex: 1;
font-size: 1rem;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.image {
max-width: 100%;
}
}
说明： 使用 flex-wrap 允许换行，flex-direction: column 在小屏下垂直堆叠，保证可读性。
立即学习“前端免费学习笔记（深入）”；
图片设置响应式尺寸
确保图片不会溢出容器或失真，关键在于限制其最大宽度并保持比例。
- 设置
max-width: 100%让图片随父容器缩放 - 使用
height: auto维持宽高比 - 添加
object-fit控制裁剪或填充方式（如cover或contain）
img {
max-width: 100%;
height: auto;
object-fit: cover;
}
控制文字流与环绕效果
在大屏上，常希望文字围绕图片显示。可通过 float 或 shape-outside 实现更自然的文本环绕。
- 使用
float: left/right实现基础环绕 - 结合
margin避免文字贴边 - 用
shape-outside创建圆形或自定义轮廓环绕（适用于非矩形图片）
img.round {
float: left;
shape-outside: circle(50%);
margin: 0 15px 10px 0;
border-radius: 50%;
}
注意： 小屏幕下建议取消浮动，改为上下排列，避免拥挤。
使用CSS Grid进行复杂排版
对于多图多文或卡片式布局，CSS Grid 提供更强的控制力。
示例：两栏图文，在移动端变为单列。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
align-items: center;
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
}
优势： 精确控制行列，适合复杂结构，且无需依赖浮动或定位。
基本上就这些。合理使用 Flexbox、Grid 和响应式图片规则，配合媒体查询，就能在各种设备上实现清晰、美观的图文混排效果。关键是根据内容结构选择合适布局模型，并始终测试在移动设备上的显示表现。
