Html Flexbox之间的间距（包含单个项目的行除外）？

我有两个div。一个坐在左边，一个坐在右边。父flexbox带有

justify content:space-between

可以很好地实现这一点，除非flex项目包装（它们应该能够做到这一点）。包裹后，它们将左对齐，因为总共只有两个项目

如何使单个项目的行居中对齐

画布打印

为家中的任何墙壁创造一个杰作！

尝试使用

flex:1

这确保您使用的是完整的可用空间，这里是JSFIDLE编辑的

---

我自己想出来的。我在第一个/左分区上使用了

flex grow:1

，在第二个/右分区上使用了

margin:auto

。这会使第一个分区扩展以占用所有空间，因此第二个分区的auto margin不会做任何事情。然后当它包裹时，第二个div不再被第一个div阻挡，自动边距接管，使第二个div居中

像这样：

画布打印

为家中的任何墙壁创造一个杰作！

.parent{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.文本{
背景：橙色；
填充：10px；
边界半径：10px；
}
.文本：独生子女{
背景颜色：绿色；
保证金：0自动；
}

画布打印

为家中的任何墙壁创造一个杰作！

这没有什么区别。在小提琴中，如果您挤压输出窗格，使其宽度不再足以容纳两个div，则粉色窗格将缠绕到下一行。在这一点上，一切都是左对齐的，我希望它是中心对齐的。如果我没有把我的问题说清楚，让我知道，我会编辑它。我的错，上次没有保存，这是我做的，啊，我知道你在那里做了什么，但我也希望第一部分的文本保持在一行，直到绝对必要。你的建议行得通，但不是我想要的。我将更新我的问题以提及这一点。嗨，似乎你已经使用了
因为它打破了界限，我已经删除了相同的并重新使用了flex:1，请让我知道这是否适用于你谢谢你的尝试，但最新的小提琴完全错了哈哈。没关系，我想出来了，并发布了我自己的答案：）“包装后，它们是左对齐的，因为总共只有两个项目。”…不完全是这样。它们是左对齐的，因为这是规范中定义的。如果您能够使用

周围的空格而不是
之间的空格，那么解决方案非常简单：@Michael_B是的，规范说如果一行上有一个项目，它应该左对齐，但唯一起作用的原因是因为总共有两个项目，它们在不同的行上。这就是我的意思。不，
周围的空间不符合我的要求。