行的Flexbox布局问题

Question

我对flexbox按照我想要的方式布局有问题。

这是我想要的样子。我希望p标记中的文本位于其他div下面的一行。请查看图片以了解其外观。

我希望它看起来像的图像

这是一个链接，我目前是如何拥有它的。

https://jsfiddle.net/dmmccollough/642thkoc/5/

这是html，查看所有代码的链接

<div class="container">
<div class="imageItem">
<img width="90px" height="90px" src="https://i.ibb.co/9trZY0b/O-Net-Legend.png" border="0">
</div>
<div class="item-1 item">FF-000312</div>
<div class="item-2 item">Last Modified: 01/09/2020</div>
<p>Descriptive text describing the nature of the reported issue.</p>
</div>

Answer 1

您需要将中的内容添加到另一个divflexbox仅向下设置一个子级别的样式当然，你必须把内容的风格设计得更像

<div class="container">
<div class="imageItem">
<img width="90px" height="90px" src="https://i.ibb.co/9trZY0b/O-Net-Legend.png" border="0">
</div>
<div class="content">
<div class="item-1 item">FF-000312</div>
<p>Descriptive text describing the nature of the reported issue.</p>
</div>
<div class="item-2 item">Last Modified: 01/09/2020</div>
</div>

如果你想让描述性文本横跨两者，你必须嵌套一点并调整标题

<div class="container">
<div class="imageItem">
<img width="90px" height="90px" src="https://i.ibb.co/9trZY0b/O-Net-Legend.png" border="0">
</div>
<div class="content">
<div style="display: flex; justify-content: space-between">
<div class="item-1 item">FF-000312</div> 
<div class="item-2 item">Last Modified: 01/09/2020</div>
</div>
<p>Descriptive text describing the nature of the reported issue.</p>
</div>
</div>