如何最大化同一行中 div 之间的空间，但如果它是唯一的，则将其居中？

Question

我正在使用 flexbox 在缩小的父容器中显示两个容器。

• 当父容器足够大，使得两个 div 并排时，我希望它们显示得尽可能远。
• 当父级 div 缩小并且第二个 div 换行时，我希望它们水平居中显示。

目前，我在父容器上使用 justify-content: space- Between ，这有助于它们尽可能远离地显示，但当第二个 div 换行时，不会使它们居中。

这就是当前在父级 div 上使用 justify-content: space- Between 的解决方案的样子：

当父 div 较宽时，它会按预期显示

当父 div 较窄时，它会换行，但两者都是左对齐而不是居中

理想情况下，它应该是这样的：

当父 div 较宽时，它会最大化它们之间的空间

当父 div 较窄时，它会将两个 div 水平居中

我尝试过各种 CSS 技巧，但这个问题的一个关键限制是它必须使用纯 CSS 来完成，不能使用像 React 这样的外部框架。我在6年前发现这个SO，它正在谈论类似的事情，以及它如何不能在 flexbox 中完成，但可以使用 grid 完成，假设两个孩子 divs 是固定宽度，但在我的情况下，孩子们的 widths 不固定.

这是我的代码的易于阅读的版本：

    #main {
        font-size: 50px;
        padding: 10px;
    }

    #parent {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #child1 {
        background: #FFFFD0;
    }

    #child2 {
        background: #FFD0FF;
    }

    <div id="main">
        <div id="parent">
            <div id="child1">
                Div #1
            </div>
            <div id="child2">
                Div #2
            </div>
        </div>
    </div>

重要说明：我只能直接在 HTML 对象上指定属性。我没有用于创建类的 CSS 文件，这就是为什么在代码片段中我使用 ID，因为这本质上是我能做的事情的限制。我正在构建一个 HTML 字符串，从后端传递到前端并在那里显示。我知道这不是最佳实践，甚至不是好的实践，但这就是问题的技术限制。

Answer 1

因此，根据您发布的图像，我假设您在 CSS 中使用 @media 查询来让子项在较小的屏幕上换行。如果是这样，请尝试以下操作：

.main {
  width: 100%;
}

.parent {
  display: flex;
  justify-content: space-between;
}

.child {
  width: fit-content;
  padding: 2rem;
}

.child:nth-child(odd) {
  background: lightblue;
}

.child:nth-child(even) {
  background: pink;
}

@media only screen and (max-width: 992px) {
  .parent {
    width: fit-content;
    flex-direction: column;
    margin: 0 auto;
  }
  
  .child {
    margin: 0 auto;
  }
}

  

    

      DIV 1
    
    

      Hell yeah! I'm the meanest...