纯CSS实现双元素自适应布局：不换行贴边/换行居中

需要实现如下布局效果：

• 容器宽度充足时，两个元素分别贴合容器左右边缘：

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

• 容器宽度不足导致元素换行时，换行后的元素自动水平居中：

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

要求优先用纯CSS实现，避免通过@media (min-width: ...)硬编码尺寸。此前尝试flexbox的wrap属性结合margin: 0 auto，但换行后元素仍贴边，无法达到居中效果。

解决方案 #

利用flexbox的自动外边距（auto margins）特性即可实现需求，无需媒体查询。核心逻辑：

1. 容器启用flex布局并允许换行
2. 给第一个元素设置margin-right: auto，将其推至容器左侧；给第二个元素设置margin-left: auto，将其推至容器右侧
3. 给两个元素设置margin: 0 auto的基础样式，确保换行后元素自动居中

完整代码实现 #

#container {
  resize: both;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ccc;
}

#container > div {
  margin: 0 auto; /* 换行时触发居中 */
}

#container > div:first-child {
  margin-right: auto; /* 宽度充足时贴左边缘 */
}

#container > div:last-child {
  margin-left: auto; /* 宽度充足时贴右边缘 */
}

<div id="container">
  <div>Ooh boy some text</div>
  <div>[btn]</div>
</div>

效果说明 #

• 容器宽度足够时，margin-right: auto和margin-left: auto分别将两个元素推至左右边缘
• 容器宽度不足时，元素自动换行，此时margin: 0 auto生效，让每个元素在单独一行中水平居中
• resize: both和overflow: auto用于手动调整容器宽度，方便测试布局切换效果

内容的提问来源于stack exchange，提问作者Sam Johan