Flex布局不支持文字环绕，但擅长图文并排、垂直居中与响应式对齐；需文字环绕时应使用float，而结构化图文混排推荐Flex，二者可分层配合使用。
Flex 布局本身不支持传统意义上的“文字环绕”（即文字像水流一样绕着图片边缘流动），但它能高效实现图文并排、垂直居中、响应式对齐等更可控的视觉效果。真正需要“环绕”的场景，仍需用 float；而追求结构清晰、对齐精准、适配多端的图文混排，Flex 是当前最优解。
图文并排 + 垂直居中（最常用场景）
适用于图片在左/右，标题和正文在其旁对齐显示，且整体垂直居中对齐。
- 把图片和文字内容包裹在同一个父容器中（如
<div class="media">） - 父容器设
display: flex和align-items: center，自动让子元素在交叉轴（默认为 Y 轴）上居中 - 用
gap控制图文间距，比手动加 margin 更干净 - 文字区域建议加
flex: 1或min-width: 0，防止长单词或 URL 撑破布局
单行内图文垂直居中（如图标+说明文字）
适合按钮旁的小图标、列表项中的头像+姓名等紧凑型组合。
- 直接将
<img>和<span>放在同一行级容器里（如<div>或<p>） - 容器设
display: flex+align-items: center - 避免给图片设
vertical-align，它在 Flex 容器中无效；也不要用float，会脱离 Flex 流 - 若需右侧对齐文字，可加
justify-content: flex-end或用margin-left: auto
响应式切换：从并排到堆叠
小屏下图文并排易拥挤，推荐用媒体查询改为上下排列，并保持居中逻辑一致。
立即学习“前端免费学习笔记（深入）”；
- 默认布局：
flex-direction: row（水平排列） - 移动端断点加：
@media (max-width: 768px) { .media { flex-direction: column; text-align: center; } } - 图片和文字都变成块级，
align-items: center依然生效，保持居中 - 可选加
gap控制上下间距，比手动设margin更统一
不推荐用 Flex 实现“环绕”，但可补救混合需求
如果设计稿明确要求文字绕图（比如图片左浮、文字从右上方开始绕流），Flex 不是合适工具——它管理的是“弹性项目”，不是“文本流”。此时应：
- 用
float: left或float: right给图片，配合margin留白 - 确保父容器有足够高度容纳环绕文字，必要时加
overflow: hidden清除浮动影响 - 若必须结合 Flex（例如整个区块需居中），可把 float 图文组再包一层 Flex 容器，仅用于外层定位
- 注意：浮动元素与 Flex 子项混用易出错，优先分离职责——外层布局用 Flex，内层环绕用 float
