Flex布局图文错位主因是未适配多端主轴方向与对齐行为；需用媒体查询切换flex-direction（PC行布局、小屏列布局），配合align-items、justify-content、gap及图片max-width:100%等响应式设置统一调控。
文字说明与图片错位，通常是因为 Flex 布局在不同屏幕尺寸下未适配好主轴方向和对齐行为。媒体查询中调整 flex-direction 和对齐属性（如 align-items、justify-content）是核心解法。
检查默认 flex 容器的流向与换行
错位常始于 PC 端用 flex-direction: row 并设 flex-wrap: nowrap，但小屏下图片宽度过大或文字过长导致溢出、挤压或基线不对齐。先确保容器有合理基础设置：
- 给 flex 容器加
display: flex和flex-wrap: wrap（避免内容被裁或强行缩放） - 子项不写死
width或用flex: 1让其自适应 - 避免图片用
height: 100%却没设父容器高度，造成拉伸或塌陷
在媒体查询中切换 flex-direction 并重设对齐方式
小屏建议改为垂直流（column），让图文上下排列，更符合阅读习惯；同时调整对齐，避免文字贴边或图片偏移：
- PC 端（默认）：
flex-direction: row; align-items: center; justify-content: flex-start; - 移动端（如
@media (max-width: 768px)）：flex-direction: column; align-items: stretch; text-align: center; - 若图文需顶部对齐（比如标题+图），小屏可加
align-items: flex-start;配合margin-top: 0;清除默认段落间距
处理图片与文字的尺寸耦合问题
错位也常因图片未响应式缩放，或文字行高/内边距在换向后未重置：
立即学习“前端免费学习笔记（深入）”；
- 图片统一加
max-width: 100%; height: auto;，防止撑破容器 - 文字容器（如
p或div）在 column 模式下可设margin: 0.5em 0;替代默认上下 margin，避免空隙过大 - 用
gap替代margin控制图文间距（支持现代浏览器），例如gap: 1rem;在 row/column 下都生效
验证对齐是否受字体或行内元素干扰
如果文字仍“飘”在图片一侧，可能是行内元素（如 span、图标）未清除基线对齐（vertical-align: baseline 默认值）：
- 给图片加
vertical-align: top;或middle; - 给包含图文的 flex 子项统一设
align-self: flex-start;覆盖容器级align-items - 检查是否有伪元素（
::before/::after）或空格字符影响布局流
基本上就这些。关键是：别只调方向，要同步理清对齐逻辑、尺寸约束和内容流特性。错位不是 bug，是布局信号——它在提醒你，当前断点下的视觉层级需要重新定义。
