通常，在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>正如您所看到的，即使在article和main标记上都指定了20px的页边距，您也只能得到最后article和footer之间的20px页边距.
然而，当使用flexbox时，我们在最后的article和footer之间得到40px的边距-从文章到Main的整整20p倍的边距，以及从Main到footer的另外20px倍的边距.
#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页边距的表现相同？