边距在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{

  display: flex;

  flex-direction: column;

  margin-bottom: 20px;

}

article{

  margin-bottom: 20px;

  background: #eee;

}

article:last-child{

  margin-bottom: 0;

}

footer{

  background: #eef;

}

<main>

  <article>

    This is article number 1

  </article>

  <article>

    This is article number 2

  </article>

  <article>

    This is article number 3

  </article>

</main>

<footer>

  This is the footer of the page

</footer>