Html 使用flex将文本环绕图像

我有以下HTML和CSS：

HTML

这是我得到的（当前结果）：

我希望在不使用float的情况下实现以下目标（期望的结果）：

---

我可以使用什么flex属性？

是否重置了基本样式？我在codepen中尝试了你的代码，如果你添加了更多的文本，它不会环绕图像，那么[link]将按预期工作。这就是我的问题。浮动应该正好解决你的问题，如果没有丑陋的自行车，你就无法用flex获得所需的结果。我知道用浮动很容易实现。我想知道是否有一个flex属性也实现了这一点

<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;
}
img {
    align-self: baseline;
}
p { 
    margin: 0 0 0 10px; 
}