问题描述
通常,在 CSS 中,当父级及其最后一个子级有边距时,边距会折叠以创建单个边距.例如
article {底部边距:20px}主要的 {背景:粉红色;底边距:20px;}页脚{背景:天蓝色;}
<主要><文章>第 1 项</文章><文章>第 2 项</文章></main><页脚>页脚</页脚>
如您所见,即使在 article
和 main
标签上都指定了 20px
的边距,您也只会得到一个20px
最后一个文章和页脚之间的边距.
然而,当使用 flexbox 时,我们在最后一篇 文章 和 footer 之间获得了 40px
边距——一个从文章到正文的完整 20p
x 边距,以及从正文到 footer 的另一个 20px
边距.
#container {显示:弹性;弹性方向:列;}文章 {底部边距:20px}主要的 {背景:粉红色;底边距:20px;}页脚{背景:天蓝色;}
<主要><文章>第 1 项</文章><文章>第 2 项</文章></main><页脚>页脚</页脚>
有没有办法让 flexbox 边距的行为与非 flexbox 的一样?
Margin collapsing 是 块格式上下文.
3.Flex 容器:flex
和 inline-flex
display
价值观
一个 flex 容器为其建立一个新的 flex 格式化上下文内容.这与建立块格式化上下文相同,除了使用 flex 布局而不是块布局.例如,浮动不会侵入 flex 容器,并且 flex容器的边距不会与其内容的边距一起折叠.
Typically, in CSS, when a parent and its last child have a margin, the margins collapse to create a single margin. E.g.
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>
As you can see, even though a margin of 20px
is specified on both the article
and the main
tags, you only get a 20px
margin between the last article and footer.
When using flexbox, however, we get a 40px
margin between the last article and footer — a full 20p
x margin from the article to main, and another 20px
from main to 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>
Is there a way to make flexbox margins behave the same way as the non-flexbox ones?
Margin collapsing is a feature of a block formatting context.
There is no margin collapsing in a flex formatting context.
这篇关于弹性盒中的边距折叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!