flex + 媒体查询是最稳的响应式图文排版方案，因flex天然支持主轴切换，媒体查询可干净控制断点，避免float在小屏下的错位、悬空与间距失控问题。
直接用 float 实现左右排版，在缩放或小屏下会错位、悬空、间距失控——这不是 bug，是 float 本就不适合响应式流式布局。
为什么 flex + 媒体查询是当前最稳的方案
因为 flex 天然支持主轴方向切换，@media 可以干净地控制断点行为，不依赖文档流脱离、不干扰后续元素、不触发意外换行。浮动在视口变窄时“看似换行”，实则仍受原始浮动上下文约束，图片常卡在右侧空白区；而 flex 容器内子项在 flex-direction: column 下会彻底回归垂直流，自然左对齐、无偏移。
- 宽屏默认
flex-direction: row，文字左、图片右，靠gap控制间距，比margin更可靠 - 小屏用
@media (max-width: 768px)切换为column，无需额外清除或重置浮动 -
align-items: flex-start确保小屏堆叠时文字和图片都左对齐（不是居中） - 图片本身只需
max-width: 100%; height: auto，不用设固定宽高
HTML 结构必须语义包裹，不能裸写 img + p
把图文放在同一父容器里，是响应式切换的前提。否则媒体查询无法统一控制两个孤立元素的排列逻辑。
- 错误写法：
<p>文字</p><img src="...">—— 两者无父子关系，@media只能分别写规则，易冲突 - 正确结构：
<div class="content-wrapper"><div class="text-content">...</div><div class="image-content"><img></div></div> - 避免用泛用类如
.row或.col，改用语义类（.text-content/.image-content），方便后期维护和可访问性增强
关键 CSS 写法与常见踩坑点
下面这段 CSS 覆盖了 95% 的实际场景，重点看注释里的「为什么」：
立即学习“前端免费学习笔记（深入）”；
.content-wrapper {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
}
<p>.text-content {
flex: 1;
max-width: 600px; /<em> 防止宽屏下文字过宽影响可读性 </em>/
}</p><p>.image-content {
flex-shrink: 0; /<em> 防止图片被压缩变形 </em>/
}</p><p>@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;
}
.text-content,
.image-content {
width: 100%; /<em> 小屏下占满父宽，确保左对齐 </em>/
}
}
- 别给
.image-content设width: 50%—— 宽屏下它会随内容撑开，小屏下又需重写，不如用flex-shrink: 0+ 自适应图片 - 不要在
@media里重复写img { width: 100% }，图片基础样式应全局定义一次：img { max-width: 100%; height: auto; display: block; } - 如果图片需要右对齐（比如装饰性图标），只改
.image-content { align-self: flex-end; }，别动justify-content，否则宽屏并排会被破坏
真正容易被忽略的是：小屏堆叠后，若父容器有 padding 或 max-width，而子项没设 width: 100%，图片可能仍右偏——因为 flex 默认不拉伸子项宽度，align-self 和 justify-content 在 column 模式下作用对象不同，这点必须手动覆盖。
