Flexbox 之间的空格，除了带有单个项目的行吗？答案

【问题标题】：Flexbox space-between except for rows with single items?Flexbox 之间的空格，除了带有单个项目的行吗？
【发布时间】：2019-10-22 15:03:24
【问题描述】：

我有两个 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>

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

附加说明： @KaranTewari 建议将 flex: 1 添加到第一个子 div，但我希望左侧 div 中的文本在绝对必要之前不要换行（具体来说，它应该只开始换行在第二个弹性项目包裹到下一行之后）。第二个 div 实际上将是一个图像，所以我更新了我的 fiddle 和 sn-p 以反映这一点。

【问题讨论】：

“包裹后，它们是左对齐的，因为总共只有两个项目。” … 不完全是。它们是左对齐的，因为这是规范中定义的。
如果您能够使用space-around 而不是space-between，解决方案非常简单：Center flex items on wrap
@Michael_B 好吧，规范说如果一行上有一个项目，它应该左对齐，但发挥作用的唯一原因是因为总共有两个项目，它们是分开的线。这就是我的意思。不，space-around 没有做我想做的事。

标签： html css flexbox

【解决方案1】：

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


.text {
  background: orange;
  padding:10px;
  border-radius:10px;

}

.text:only-child {
  background-color: green;
  margin:0 auto;
}

<div class="parent">
  <div class="text">
    <strong>Canvas Prints</strong><br>
    <span >Create a masterpiece for any wall in your home!</span>
  </div>
  <div class="img" >
    <img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
  </div>
</div>

您可以使用 :only-child 选择器并将 margin:auto 赋予唯一的子元素。请看sn-p。

【讨论】：

【解决方案2】：

我自己想通了。我在第一个/左 div 上使用了flex-grow: 1，在第二个/右 div 上使用了margin: auto。这使得第一个 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>

（还有小提琴：https://jsfiddle.net/xv6oa418/2/）

【讨论】：

【解决方案3】：

尝试使用

flex:1

这可确保您使用完整的可用空间，此处为 jsfiddle 编辑 https://jsfiddle.net/karantewari/tfg0kymb/1/

【讨论】：

这没什么区别。在小提琴中，如果您挤压输出窗格，使其不再足够宽以容纳两个 div，则粉红色的会包裹到下一行。那时，一切都是左对齐的，我希望它居中对齐。如果我的问题不够清楚，请告诉我，我会对其进行编辑。
我的错，上次没有保存，这是我做的jsfiddle.net/karantewari/tfg0kymb/2
啊，我明白你在那里做了什么，但我也希望第一个 div 中的文本保持在一行，直到绝对必要。所以你的建议有效，但不是我想要的。我会更新我的问题以提及这一点。
嗨，您好像使用了
，因为它打破了界限，我已经删除了相同的并重新使用了 flex:1，如果这对您有用，请告诉我jsfiddle.net/karantewari/5qzp4j0n/1
感谢您的尝试，但最新的小提琴完全错了哈哈。没关系，我想通了并发布了我自己的答案:)