孩子之间的flexbox边距崩溃

Question

这个问题已经在这里有了答案：

• 边距在flexbox中崩溃 2个答案

带有display：block边距的容器内的2个元素折叠，但带有display：flex的容器不起作用！ 例

  .wrapper {
  width: 50%;
  margin: 0 auto;
}
.container {
  display: flex;
  // display: block;
  flex-flow: column nowrap;
  background-color: green;
}
h1 {
  background-color: #777;
  margin-bottom: 20px;
}
p {
  background-color: #ccc;
  margin-top: 15px;
}

Answer 1

一次使用以下display: flex时，边距不会折叠display: flex 。 如果您想大致了解塌陷裕度，请从以下几篇文章开始：

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
• https://css-tricks.com/what-you-should-know-about-collapsing-margins/

---

作为一种变通方法，要使其行为类似于display: block ，可以执行类似的操作，在其中将flex类添加到具有display: flex container ，以仅定位h1和p 。

而且，如果您无法手动执行此操作，则脚本可以为您完成该操作。

 .wrapper { width: 50%; margin: 0 auto; } .container { display: flex; /* display: block; */ flex-flow: column nowrap; background-color: green; } h1 { background-color: #777; margin-bottom: 20px; } p { background-color: #ccc; margin-top: 15px; } /* custom classes to remove margin */ .container.flex h1:first-child { margin-top: 0; } .container.flex p:last-child { margin: 0; } 

 <div class="wrapper"> <div class="container flex"> <h1>header h1</h1> <p>plain text</p> </div> </div>