Question

带有显示的容器内的2个元素：块边距崩溃，但显示：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类添加到container的{{1}}类{ {1}}，仅定位display: flex和h1。

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

＆＃13;

.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;
}

＆＃13;

flexbox边缘在儿童之间坍塌

1 个答案: