子项之间的 flexbox 边距折叠

Question

2 个容器内的元素，边距 display:block 折叠，但 display:flex 不工作！ example

  .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: block 相似，您可以这样做，将 flex class 添加到 container 的有 display: flex，仅针对 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>

子项之间的 flexbox 边距折叠

flexbox margin collapsing between children

css

margin

collapse

flexbox