边距在flexbox中崩溃

Question

通常，在CSS中，当父级和最后一个子级具有边距时，这些边距会折叠以创建单个边距。例如

article {

  margin-bottom: 20px

}

main {

  background: pink;

  margin-bottom: 20px;

}

footer {

  background: skyblue;

}

<div id="container">

  <main>

    <article>

      Item 1

    </article>

    <article>

      Item 2

    </article>

  </main>

  <footer>Footer</footer>

</div>

如您所见，即使20px在article和main标记上都指定了的边距，您也只能20px在最后一篇文章和页脚之间得到一个边距。

但是，当使用flexbox时，我们40px在上一个文章和页脚之间留有边距- 20p从文章到main 的全边距为x，20px从main到footer的边距为全。

#container {

  display: flex;

  flex-direction: column;

}

article {

  margin-bottom: 20px

}

main {

  background: pink;

  margin-bottom: 20px;

}

footer {

  background: skyblue;

}

<div id="container">

  <main>

    <article>

      Item 1

    </article>

    <article>

      Item 2

    </article>

  </main>

  <footer>Footer</footer>

</div>

有没有一种方法可以使flexbox的页边距行为与非flexbox的页边距相同？

Answer 1

边距折叠是块格式化上下文的功能。在flex格式化上下文中没有边际崩溃。3. Flex容器：flex和inline-flex display 值一个伸缩容器为其内容建立一个新的伸缩格式上下文。这与建立块格式化上下文相同，除了使用Flex布局而不是块布局。例如，浮点数不会侵入flex容器，并且flex容器的边距不会随其内容的边沿收缩。

Answer 2

注意：这不是使边距在弹性框布局中的行为与在块布局中相同的方式。但是，这在某些情况下可能有助于解决保证金问题。您可以使用伪选择器来获得所需的效果，而不必依赖于崩溃的边距：main{&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; margin-bottom: 20px;}article{&nbsp; margin-bottom: 20px;&nbsp; background: #eee;}article:last-child{&nbsp; margin-bottom: 0;}footer{&nbsp; background: #eef;}<main>&nbsp; <article>&nbsp; &nbsp; This is article number 1&nbsp; </article>&nbsp; <article>&nbsp; &nbsp; This is article number 2&nbsp; </article>&nbsp; <article>&nbsp; &nbsp; This is article number 3&nbsp; </article></main><footer>&nbsp; This is the footer of the page</footer>