justify-content 不适用于自动边距 [重复]答案

【问题标题】：justify-content not working with auto margin [duplicate]justify-content 不适用于自动边距 [重复]
【发布时间】：2019-11-17 06:47:03
【问题描述】：

以下页面显示了两个矩形，红色和蓝色。显示是柔性的。预计红色 div 位于页面左侧 (margin-right: auto)，而蓝色 div 位于页面其余部分的中心 (justify-content: center)。

但是，结果是蓝色 div 完全显示在页面右侧而不是居中。我不了解 flexbox。

body {
  display: flex;
  justify-content: center;
}

#redDiv {
  width: 5em;
  height: 10em;
  background-color: red;
  margin-right: auto;
}

#blueDiv {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div id="redDiv"></div>
<div id="blueDiv"></div>

更新：

感谢大家提供的信息和建议。在他们之后，最终的代码是：

body {
  display: flex;
}

#redDiv {
  width: 5em;
  height: 10em;
  background-color: red;
    margin-right: auto;

}

#auxDiv {
  flex: 1 1 auto;
  
  display: flex;
  justify-content: center;
}

#blueDiv {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<!DOCTYPE html>
<html>
<body>

<div id="redDiv"></div>
<div id="auxDiv">
<div id="blueDiv"></div>
</div>

</body>
</html>

更新 2：

这个基于 Temani Afif 的 cmets 的解决方案给出了相同的结果：

body {
  display: flex;
}

#redDiv {
  width: 5em;
  height: 10em;
  background-color: red;
}

#blueDiv {
  width: 10em;
  height: 10em;
  background-color: blue;
  margin: auto;
}

<!DOCTYPE html>
<html>
<body>

<div id="redDiv"></div>
<div id="blueDiv"></div>
</div>

</body>
</html>

【问题讨论】：

@TemaniAfif，我知道我已经在其他帖子中写过这个问题。仅供参考，当我知道答案在另一个帖子中时，我有时不关闭问题的原因是，解决方案通常深埋在重复的答案中，迫使 OP 和其他人浏览整个帖子。
我知道我不想在我的开发过程中通过一个规范的帖子来找到回答我的问题的部分。因此，此处快速直接的答案可能会更有帮助。我并不是说你关闭这篇文章是错误的。我建议快速提供答案可能对用户更友好。（也许我们在这里的两个动作都效果最好？也许值得进行元讨论。）
@pasabaporaqui 第一个问题是 canonical 问题，涉及与居中相关的所有内容，阅读答案，您将找到实现结果所需的所有信息。你也会明白你的问题。您不需要任何额外的 div，将 margin:auto 应用于蓝色即可：jsfiddle.net/zLxb43to。您可以通过从副本中了解自动边距的工作原理来达到此结果（请注意，如果我添加的副本不够，我还可以添加更多副本）
@TemaniAfif，这实际上并不能解决问题。蓝色 div 上的 margin: auto 将它在可用空间中居中，而不是在整行中。换句话说，它将蓝色 div 居中在红色 div 右侧的区域内，这意味着 div 最终位于该行的中心右侧。
@Michael_B 我知道，我只是复制了他在问题中添加的代码，没有添加任何额外的 div 假设这是预期的结果，因为他说 感谢所有人提供的信息和建议。在他们之后，最终的代码是：

标签： html css flexbox

【解决方案1】：

使用auto 边距后，关键字对齐属性（例如justify-content）将不起作用。 auto 边距已用完所有可用空间。

§ 8.1. Aligning with auto margins

如果空闲空间分配给自动边距，对齐属性将在该维度上没有影响，因为边距将有偷走了弯曲后剩余的所有可用空间。

此处描述了您尝试实现的布局：

Center and right align flexbox elements

【讨论】：