html - Flexbox space-between 除了带有单个元素的行？

Question

我有两个 div。一个需要坐在左边，一个在右边。带有 justify-content: space-between 的父 flexbox 非常适合这个，除非 flex 元素包装(他们应该能够做到)。换行后，它们左对齐，因为总共只有两个元素。

如何使包含单个元素的行居中对齐？

<div style="display: flex; justify-content: space-between; flex-wrap: wrap">
	<div style="background: orange">
		<strong>Canvas Prints</strong><br>
		<span style="font-size: 14px; color: #ff0000">Create a masterpiece for any wall in your home!</span>
	</div>
	<div style="background: pink">
		<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
	</div>
</div>

(或者您可以使用 fiddle ，因为压缩 fiddle 的输出 Pane 比调整整个 SO 窗口的大小以查看 div 换行更容易:https://jsfiddle.net/xv6oa418/1/)

---

附加说明:@KaranTewari 建议将 flex: 1 添加到第一个子 div，但我希望左侧 div 中的文本在绝对必要之前不要换行(具体来说，它应该仅在第二个 flex 元素换行到下一行后才开始换行)。第二个 div 实际上是一张图片，所以我更新了我的 fiddle 和代码片段以反射(reflect)这一点。

Answer 1

我自己想通了。我在第一个/左边的 div 上使用了 flex-grow: 1，在第二个/右边的 div 上使用了 margin: auto。这使得第一个 div 扩展以占用所有空间，因此第二个 div 的自动边距不会做任何事情。然后当它换行时，第二个 div 不再被第一个 div 阻挡，自动边距接管，使第二个 div 居中。

像这样:

<div style="display: flex; justify-content: space-between; flex-wrap: wrap">
	<div style="background: orange; flex-grow: 1;">
		<strong>Canvas Prints</strong><br>
		<span style="font-size: 14px; color: #ff0000">Create a masterpiece for any wall in your home!</span>
	</div>
	<div style="background: pink; margin: auto">
		<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
	</div>
</div>

(还有 fiddle :https://jsfiddle.net/xv6oa418/2/)