柔性箱边缘崩溃

通常，在 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的边距，您也只能在最后一个 文章和 页脚之间获得 20px的边距。

然而，在使用 弹簧箱时，我们得到了最后一个 文章和 页脚之间的一个 40px边界ーー从文章到主要内容的一个完整的 20px 边界，以及从主要内容到 页脚的另一个 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>

有没有办法使 弹簧箱保证金的表现与非弹性工作箱的一样？

34127 次浏览
小开
最佳答案

Margin collapsing is a feature of a block formatting context.

There is no margin collapsing in a flex formatting context.

3. Flex Containers: the flex and inline-flex display values

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

小开

NOTE: This is not a way to make margins behave in a flex box layout the same way as they do in a block layout; however, this may help resolve the margin problem in some cases.

Instead of relying on collapsing margins, you can use pseudo selectors to get the effect you want:

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>

小开

The accepted answer explains why it doesn't work, but does not provide a solution. Here's a way to make the flexbox elements align just like the non-flexbox example.

#container {
display: flex;
flex-direction: column;
}


main {
background: pink;
margin-bottom: 20px;
}


main > article + article {
margin-top: 20px
}


footer {
background: skyblue;
}
<div id="container">
<main>
<article>
Item 1
</article>
<article>
Item 2
</article>
</main>
<footer>Footer</footer>
</div>

小开

margin-trim is likely to be added to the css specifications, which will deal with these type of situations. More details are found in the https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim. Browser support can be viewed here: https://caniuse.com/mdn-css_properties_margin-trim

小开

though margin collapse is not possible with flexbox, you can use gap to achieve the same result:

.parent {
display: flex;
flex-wrap: wrap;
flex-direction: row;
column-gap: 5px;
row-gap: 15px;
      

max-width: 70px;
outline: 1px solid #440;
}


.parent > div {
background: #8ff;
width: 20px;
height: 20px;
}
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

https://coryrylan.com/blog/css-gap-space-with-flexbox


提交答案