如果必须换行，请将两个元素居中，否则粘在两侧

Question

我有两个元素，如果足够大，应该放在屏幕的边缘，或者，如果它们必须换行，它们会换行并水平对齐。

像这样（想象那些是浏览器窗口）：

• 无溢出（注意元素如何粘在侧面）：

╔════════════════════════════════╗
║Ooh boy some text          [btn]║
║                                ║
╚════════════════════════════════╝

• 是的溢出（注意元素现在如何在中心对齐）：

╔═══════════════════════╗
║   Ooh boy some text   ║
║         [btn]         ║
╚═══════════════════════╝

我最好使用纯 CSS 来实现，而不需要通过

@media (min-width: ...)

等硬编码尺寸。

到目前为止，我已经尝试使用 Flexbox，它正在包装并使用

margin: 0 auto

使其中间有空白空间。但我无法在包裹时让它发挥作用 - 任何东西总是粘在两侧而不是留在中间。

实施尝试成功了一半

这是我用于测试的文件：

#container {
  resize: both;
  overflow: scroll;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div id="container">
  <div>aaaaaa</div>
  <div style="margin: 0 0 0 auto">
    <div>bbbbbbb</div>
  </div>
</div>

此外，以下尝试是使非换行大小写正确的尝试，如下所示： 全部如上述问题所述

尝试#1

这是使用分隔符的第一次迭代。

<div id="container">
    <div>aaaaaa</div>
    <div style="margin: 0 auto"></div>
    <div>bbbbbbb</div>
</div>

结果： 第一个块粘在左边

尝试＃2

将第二个元素插入分隔符并给出它

margin-left: auto

:

<div id="container">
    <div>aaaaaa</div>
    <div style="margin: 0 0 0 auto"><div>bbbbbbb</div></div>
</div>

结果： 第二个方块粘在右边

Answer 1

删除内联样式

style="margin: 0 0 0 auto"

，可以使用

justify-content: space-between;

实现此目的

#container {
  resize: both;
  overflow: scroll;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding:30px 0;
}

media screen and (max-width:767px){
  #container {
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
}

<div id="container">
  <div>aaaaaa</div>
  <div>
    <div>bbbbbbb</div>
  </div>
</div>

CSS 中小屏幕的媒体查询。