对齐图形及其文字/插图

Question

我有三个数字，每个数字都有不同的大小和不同的插图。我希望它们显示行内格式（因此，如果最后一个数字不适合该行，它将移动下一行）。

[到目前为止，这是我所拥有的：https://jsfiddle.net/Jonjei/31kteL68/6/（预览角与我在普通窗口中看到的不一样）图片是随机占位符，不属于我。

问题：figcaptions占据了所有空间，并将下一个图形推到下一行。

我正在寻找的解决方案：使每个figcaption文本停在其图形的边缘，然后移至figcaption内的新行。如果图太大（无法插入第一行），请将其移至下一行。

非常欢迎任何其他一般性建议和技巧。我设法使文本与单行表一起使用，但是当我希望最后一个数字移至下一行时，这没有帮助。

Answer 1

.container {
	background-color: #afbed8;
	border: 5px transparent solid;
	border-radius: 2px;
	margin: 2% 10% 2% 10%;
	padding: 0px 7% 0px 7%;
}
.fig-container{
  display:flex;
}
figure{
  flex:1 0 auto;
}

<!-- images are placeholders and belong to their respective owners -->
<div class="container" align="center">
<h1 style="font-size: 1.5rem">OTHER NOTES</h1>
<div class="fig-container">
  <figure><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple5/v4/da/83/ae/da83ae00-d126-1200-1588-c74c59aa1a38/source/256x256bb.jpg" alt=""><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption></figure>

  <figure><img src="https://www.petmd.com/sites/default/files/petmd-puppy-weight.jpg" alt=""><figcaption>Duis ut nulla sed dolor ultrices ornare sed pharetra ligula. Phasellus sapien augue, eleifend ut odio vel, suscipit auctor purus.</figcaption></figure>

  <figure><img src="https://vetstreet-brightspot.s3.amazonaws.com/56/d831705c9f11e19be6005056ad4734/file/puppy_training-tips-335mk022012-200454626-001.jpg" alt=""><figcaption>Proin volutpat dictum leo eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</figcaption></figure>
</div>