Flex不能直接实现文字环绕，因其子元素脱离文档流而无法触发文本绕行；文字环绕应使用float或CSS Shapes，而Flex适合图片与标题等结构化对齐。
Flex不能直接实现文字环绕图片
CSS Flex布局本身不支持文字环绕（wrap text around image）效果。它擅长一维排列，但“文字流绕过浮动元素”是Float或CSS Shapes的职责，Flex容器里的子元素会按主轴顺序排列，不会自动让文本内容避开其中某个子项。
为什么用float比display: flex更合适
文字环绕本质是文档流中内联内容（如段落文字）主动避让块级浮动元素。而Flex会让所有子元素脱离常规文档流，变成弹性项目——p和img在同一个display: flex容器里，就只是并排的两个盒子，没有“文字绕行”的触发条件。
-
float: left会把图片拉出正常流，后续文本自然向右填充剩余空间 - Flex容器中即使给
img设margin-right，文字也不会“流动”过去，只会显示在下一个flex item的位置（比如换行到下一行） - 若强行用Flex模拟，得拆成多个
span手动切分文字，再逐段定位——不可维护、响应式灾难
真正能用Flex的地方：图片+标题/说明的对齐控制
如果你实际想要的是“图片左对齐，右边紧贴一段标题和简短描述”，这才是Flex的典型场景——不是环绕，而是结构化对齐。
例如：
立即学习“前端免费学习笔记（深入）”；
<div class="media">
<img src="avatar.jpg" alt="头像">
<div class="text">
<h3>张三</h3>
<p>前端工程师，专注CSS细节</p>
</div>
</div>对应CSS：
.media {
display: flex;
align-items: flex-start; /* 避免文字基线对齐导致错位 */
}
.media > img {
margin-right: 12px;
flex-shrink: 0; /* 防止图片被压缩 */
}想让文字真正环绕？老老实实用float + 清除
兼容性好、语义清晰、浏览器原生支持。现代写法也完全够用，无需回避。
- 给
img加float: left，并设置margin-right留白 - 确保后续
p、div等是普通块级流元素（不要包在Flex容器里） - 需要时用
clear: both防止后续内容上浮 - 注意
float元素高度塌陷问题：父容器可能需要overflow: hidden或伪元素清除
复杂点在于响应式断点——float在小屏上常要改成块级堆叠，这时用媒体查询关掉float比在Flex里硬调环绕逻辑现实得多。
