html - 在一行时将两个元素左右对齐，在两行时居中

Question

让我们考虑容器 C 中的两个元素 A 和 B。当width(C) > width(A)+width(B) ，我希望元素保持在同一行:A 左对齐，B 右对齐。但是当width(C) < width(A)+width(B) ，我希望他们使用自己的线，并在 C 水平居中。

我有achieved以上所有，除了后一个要求——当它们各自在自己的线上时将它们居中。我怎么做？热衷于使用 flexbox，但任何可行的解决方案都很好，即使使用 float 也是如此。

.container {
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
}
.container div:nth-child(1) {
	background-color: orange;
}
.container div:nth-child(2) {
	background-color: green;
}

<div class="container">
  <div>Item1 Item1 Item1 Item1 Item1</div>
  <div>Item2 Item2 Item2 Item2 Item2</div>
</div>

Answer 1

您需要使用 media queries .

在此jsFiddle我让你可以看到媒体查询现在居中，我使用了 Michael_B 的建议 justify-content: space-around;最后是这样的:

@media(max-width: 768px) {
  .container {
    justify-content: space-around;
  }
}

您可以根据自己的具体用途使用像素。

如果它们在居中时必须在新的一行上，那么您将需要尝试使用 this fiddle 之类的东西我做的解决方案，基本上只是添加 <br class="hidden"/>并且仅在屏幕小于等于 768 像素时显示它。或者，如果 you hold grudges，您可以使用自己的解决方案反对<br/>