Flex本身不支持文字环绕，因其子元素脱离文档流而无法触发文本绕行；文字环绕应使用float或CSS Shapes，而Flex适合图片与标题等结构化对齐。
Flex 本身不支持文字环绕，也和 flex-wrap、width 的组合无关；强行在 Flex 容器里做首行缩进，大概率失效或行为异常。
为什么 flex-wrap 和 width 无法解决文字环绕
文字环绕（text wrap around image）的本质是「常规文档流中的内联内容自动绕开浮动块级元素」。而 display: flex 会让所有子元素脱离文档流，变成弹性项目——哪怕你给图片设 float: left，它在 Flex 容器里也会被忽略（float 在 Flex item 上无效）。flex-wrap 只控制 flex items 是否换行，不影响内部文本的流向；width 控制容器尺寸，但不会触发文本绕行逻辑。
- 常见错误现象：
img和p同为 flex item，即使img设了margin-right，p里的文字也不会“流动”到图片右侧，只会整体作为一块内容排在图片后（或换行） - 使用场景误判：想实现「图片左置 + 文字右绕」？这不是 Flex 的职责，而是
float或shape-outside的任务 - 性能影响：用 Flex 模拟环绕需手动拆分文字为多个
span，再配合order、margin调整位置——响应式下极易错位，维护成本高
text-indent 在 Flex 容器中常失效的真正原因
不是 text-indent 不能用，而是它作用的对象必须是「计算后 display 为 block 或 inline-block 的块级上下文」。Flex 容器中的子元素默认是 flex item，其内部段落若未显式声明块级行为，可能被父级 flex 样式干扰。
- 检查该
p元素的 computeddisplay值是否仍为block；某些 UI 框架会把 flex item 设为inline-flex，导致子元素丢失块级特性 - 强制修复：
p { display: block; text-indent: 2ch; }—— 不要依赖父容器“透传”块级语义 - 干扰项排查：确认该
p没有margin-left或padding-left，否则视觉上会掩盖text-indent效果 - 单位建议优先用
2ch（比2em更贴近中文字符宽度），兼容老浏览器时才退回到32px并锁定font-size: 16px
真正该用 Flex 的地方：结构化对齐，不是环绕
如果你实际需要的是「图片 + 标题 + 简短描述」这类左图右文的紧凑布局，Flex 才是正解。这时不需要文字环绕，也不用动 text-indent 去修文字流——那是另一层排版问题。
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
.media { display: flex; align-items: flex-start; }+.media img { margin-right: 1rem; }+.media .content { flex: 1; } - 注意：标题/描述用
h3、p等块级标签即可，它们天然支持text-indent，只要确保没被 flex 父级意外覆盖 display 值 - 不要给整个
.media容器加text-indent——它不作用于子元素文本，只影响自身伪元素或 inline 内容（几乎没有意义）
复杂点在于：很多人混淆了「视觉上像环绕」和「真实文本流环绕」。前者可用定位+负 margin 临时凑合，后者必须靠文档流机制。Flex 是强控制型布局，它不妥协于流式行为——这点从一开始就决定了它的适用边界。
