两个项目在一行时左右对齐，在两行时居中

Posted 2023-03-05

【中文标题】两个项目在一行时左右对齐，在两行时居中

【英文标题】：Align two items left and right when on one line, and center when on two lines

【发布时间】：2017-07-18 02:27:24

【问题描述】：

让我们考虑两个项目 A 和 B 在它们的容器 C 中。当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>

【问题讨论】：

可能我不明白你的问题，但似乎它已经对我有用了

您将需要使用媒体查询，因此在 div 将进入自己的行并设置其边距的点处设置一个断点：auto;

考虑justify-content: space-around，而不是justify-content: space-between：***.com/q/38290861/3597276

@Andrewbrough 使用带有断点的媒体查询有几个缺点，请参阅我对 maxshuty 的 回答的评论。 @Michael_B 项目需要分别左右对齐当它们在同一行时。 space-around 会让它们不会粘在边缘。

@Greendrake。是的，内容不会是已知的宽度，那么这使得这并不总是有效。我能看到的唯一替代方法是使用 js 来计算何时根据容器的大小添加/删除 css 属性。

【参考方案1】：

您需要使用media queries。

在这个jsFiddle 中，我让你可以看到，通过媒体查询，它现在居中，我使用了 Michael_B 对justify-content: space-around; 的建议，结果如下：

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

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

如果它们在居中时必须在新行上，那么您将需要使用我制作的this fiddle 解决方案，基本上只是添加<br class="hidden"/> 并且仅在屏幕为 you hold grudges 与 <br/> 对抗，您也可以使用自己的解决方案

【讨论】：

谢谢。您的解决方案是可行的，但 1) 需要在 A 或 B 的内容发生变化时调整max-width； 2) 仅适用于容器宽度拉伸到浏览器窗口的情况；不一定是这样。