Question

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

除了后一项要求之外，我有achieved以上所有内容 - 当它们各自独立时将它们居中。我怎么做？热衷于使用flexbox，但任何工作解决方案都会很好，即使是花车也是如此。

.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"/>并且只在屏幕显示时显示＆lt; = 768像素。或者，如果you hold grudges针对<br/>

，您可以使用自己的解决方案

在一条线上左右对齐两个项目，在两条线条上对齐

1 个答案: