为什么负边距顶部在 flexbox 中不起作用？答案

【问题标题】：Why does not negative margin-top work within flexbox?为什么负边距顶部在 flexbox 中不起作用？
【发布时间】：2021-04-22 09:43:50
【问题描述】：

Example to show the problem

如我们所见，#a2 仅上移 50px，而预期上移 100px。

有人可以为我解释一下吗？这让我困惑了好几天..

#container{
  border: 1px solid red;
  position: relative;
  height: 200px;
  margin-top: 200px;
  display: flex;
  align-items: center;
}
#a1{
  height: 100px;
  border: 1px solid black;
  background-color: gray;
  width: 100px;
}
#a2{
  height: 100px;
  border: 1px solid black;
  background-color: gray;
  margin-top: -100px;
  right: 20px;
  width: 100px;
}

<div id="container">
  <div id="a1">
  
  </div>
  <div id="a2">
  
  </div>
</div>

【问题讨论】：

删除align-items:center

标签： css flexbox margin

【解决方案1】：

感谢各位热心的回复。但是，我故意使用 align-items: center 。

经过实验，我认为主要原因是顺序。在这种情况下，margin-top: -100px 首先扩展容器。然后它垂直居中 div。

注意这一点：它与先居中然后应用 margin-top: -100px 完全不同。

【讨论】：

【解决方案2】：

你应该删除 align-items:center 并将 margin-top:100px 给 div #a1

#container{
  border: 1px solid red;
  position: relative;
  height: 200px;
  margin-top: 200px;
  display: flex;

}
#a1{
  height: 100px;
  border: 1px solid black;
  background-color: gray;
  margin-top:100px;
  width: 100px;
}
#a2{
  height: 100px;
  border: 1px solid black;
  background-color: gray;

  right: 20px;
  width: 100px;
}

<div id="container">
  <div id="a1">
  
  </div>
  <div id="a2">
  
  </div>
</div>

【讨论】：

【解决方案3】：

#a2 仅移动 -50px，因为您已将 align-items:center 用于使用 display:flex 的容器。这将使 div #a2 垂直居中。删除它将解决您的问题。

使用display:flex 时，您可以使用justify-content:center 将内容水平居中，使用align-items:center 垂直居中

如果您需要有关此主题的更多信息，请参阅：Aligning Items in a Flex Container

查看此示例代码：

#container{
  border: 1px solid red;
  position: relative;
  height: 200px;
  margin-top: 200px;
  display: flex;
  /*align-items: center;*/ /*Removed align-items:center*/
}
#a1{
  height: 100px;
  border: 1px solid black;
  background-color: gray;
  width: 100px;
}
#a2{
  height: 100px;
  border: 1px solid black;
  background-color: gray;
  margin-top: -100px;
  right: 20px;
  width: 100px;
}

<body>
  <div id="container">
    <div id="a1"></div>
    <div id="a2"></div>
  </div>
</body>

【讨论】：