如何使用Flex属性实现文字环绕图片效果（不使用float）

Hey there, let's break this down clearly:

There isn't a dedicated Flex property that can directly achieve the traditional text-wrapping-around-image effect (where text flows around the image's contour, wrapping below it when it runs out of horizontal space to the right).

Flex is a one-dimensional layout system—your <img> and <p> are treated as separate flex items, so they'll arrange as block-level elements, not letting text seep into the space below the image.

That said, if you're looking to mimic a similar responsive layout within a Flex container (image stays left-aligned, text fills the right space, and wraps entirely below the image when the container is too narrow), here's how you can use Flex properties to pull that off:

• Add flex-wrap: wrap to your .container to allow flex items to wrap onto new lines when horizontal space is limited.
• Set flex-shrink: 0 on the <img> to prevent it from getting squashed when space tightens.
• Give the <p> flex-grow: 1 so it takes up all remaining space next to the image.

Here's the updated code:

<div class="container">
 <img src="img.png">
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est lectus, venenatis sit amet nisl sed, molestie interdum elit. Proin maximus fermentum rhoncus. Vestibulum blandit ligula ligula. Mauris volutpat cursus enim eu iaculis. Duis condimentum ante sed dolor lacinia imperdiet. Phasellus felis orci, dictum sed elit sed, lobortis congue sem. Etiam at tortor diam. </p>
</div>

body { font-family: Arial; }
.container { max-width: 500px; display: flex; flex-wrap: wrap; }
img { flex-shrink: 0; margin-right: 10px; }
p { flex-grow: 1; margin: 0; }

Just a quick note: This is a layout mimic, not true text wrapping. For actual text wrapping (where individual lines of text flow next to the image until the image ends, then span the full width), you'd need to use CSS shape-outside (not a Flex property) instead of relying solely on Flex layout.

内容的提问来源于stack exchange，提问作者gentian