使用Flexbox或Grid结合媒体查询实现响应式图文排列：小屏垂直堆叠，大屏水平并排；图片设max-width:100%和height:auto，用object-fit控制缩放，通过order调整显示顺序，确保内容在不同设备上自然协调展示。
响应式布局中文字与图片的排列，关键在于让内容在不同屏幕尺寸下都能自然展示。核心方法是使用CSS的Flexbox或Grid布局，并结合媒体查询动态调整排列方式。
使用Flexbox实现图文响应式排列
Flexbox非常适合处理图文混排的响应式需求。通过设置容器为弹性布局，可以轻松控制图片和文字在不同屏幕下的排列方向。
示例代码：
.container {display: flex;
flex-direction: column;
gap: 10px;
}
img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
align-items: center;
}
}
说明：在小屏幕上，图片在上、文字在下垂直排列；当屏幕宽度达到768px以上时，改为水平排列。
立即学习“前端免费学习笔记（深入）”；
使用Grid布局实现更灵活的图文结构
CSS Grid适合需要更复杂对齐或跨列设计的场景。
示例：
.grid-container {display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
@media (min-width: 768px) {
.grid-container {
grid-template-columns: 1fr 2fr;
}
}
这样可以在大屏上让图片占1份宽度，文字占2份，形成图文并排效果。
响应式文字与图片对齐技巧
为了让图文在不同设备上看起来协调，注意以下几点：
- 图片始终设置 max-width: 100% 和 height: auto，防止溢出容器
- 使用 object-fit 控制图片在容器内的缩放方式，如 cover 或 contain
- 在移动端优先考虑垂直堆叠，避免文字过窄影响阅读
- 利用 order 属性在不同断点调整图文顺序（比如在手机上先显示文字）
基本上就这些。合理运用Flexbox或Grid配合媒体查询，就能实现自然流畅的响应式图文排列。不复杂但容易忽略细节。
