css - 环绕杂志布局中的元素

我想创建一种杂志类型的布局，右上角有一个图像，左侧有元素（文本、框、图像）。挑战在于图像下方的元素应该占据整个宽度。

我试过

float: right

虽然这将图像周围的其他元素包裹起来，但它不允许元素填充可用宽度。

还尝试了 flexbox，但似乎无法找出如何在这种情况下正确使用它。

例子：

当图像较高时：

标签： cssflexbox

好的，我最终通过使用 flex-box 让它工作了，但方式与我预期的不同，我不太确定这是一个“合法”的解决方案。

似乎弹性项目填满了它们（非弹性）父级的水平空间。

我必须将左侧元素包装在一个 div 中，并将每个元素的 display 属性设置为 flex。

#leftContent > * {
  display: flex;
}