两个项目之间的弹性空间，但在包装时居中[重复]

Posted 2023-03-05

【中文标题】两个项目之间的弹性空间，但在包装时居中[重复]

【英文标题】：Flex space-between 2 items, but centered when wrapped [duplicate]

【发布时间】：2021-11-13 05:04:20

【问题描述】：

我想做的事

考虑一个容器中的两个元素：

<div class="container">
    <div>Thing 1</div>
    <div>Other thing</div>
</div>

我希望满足以下条件：

在广泛的上下文中，这两个元素应位于容器的两端。 在狭窄的上下文中，如果两个元素不能放在一行中，第二个元素应该“换行”到新行。 在元素位于两行的情况下，两个元素都应居中。

此外，我想避免使用媒体断点，这样布局就可以工作，而与元素和/或容器的宽度无关。该解决方案不需要使用 flex-box（用 flex-box 来解释我想要什么更容易）。

我的尝试

.container 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

这适用于前两个条件，但不适用于第三个条件。我尝试了justify-content/flex-grow/flex-basis 的不同值，但未能找到成功的组合。

我也考虑过使用grid，但同样收效甚微。

注意

This 是一个非常相似的问题（虽然，这是一个更具体的用例，因为我只需要 2 个元素而不是通用解决方案。）

【问题讨论】：

你不能。 CSS 无法检测到环绕。您需要媒体查询

@Paulie_D 谢谢。我很欣赏这一点。尽管如此，我还是看到了一些巧妙的技巧（可以说是 hacks），这些技巧可以实现我以前认为 CSS 不可能实现的目标。我很可能在这里过于乐观，但我生活在希望中:)

如果我们可以的话，这仍然是您提供的链接的副本，并且答案将在那里发布。

@Paulie_D 也许吧。链接问题的解决方案肯定是该问题的解决方案，但是反过来却没有。我在想象可能类似于附加 div 的东西，具有较高的 flex-grow 值来模拟 space-between 行为。这不太行。但是这样的解决方案可能是这个问题的解决方案，但不是链接问题的解决方案。

这个问题正在meta讨论。

【参考方案1】：

使用justify-content: space-around，您可以实现第三个标准，其中元素出现在广泛上下文的另一端

.container 
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

<div class="container">
    <div>Thing 1</div>
    <div>Other thing</div>
</div>

否则，如果您希望它们在广泛的上下文中呈现在最末端，则必须使用 @media ，这取决于 text-div 的宽度，这会使它们在视口宽度减少一定程度后换行。

此处将占用 500 像素宽度，文本将仅用于演示

.container 
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;


@media only screen and (max-width: 500px) 
  .container 
    justify-content: center;
  
  .textDiv 
    width: 100%;
    text-align:center
  

<div class="container">
  <div class="textDiv">Thing 1</div>
  <div class="textDiv">Other thing</div>
</div>