flexbox边缘在儿童之间折叠

Question

2个元素在显示容器内：块边缘折叠，但显示：flex不工作！当一个人使用display: flex example

.wrapper { 
    width: 50%; 
    margin: 0 auto; 
} 
.container { 
    display: flex; 
    // display: block; 
    flex-flow: column nowrap; 
    background-color: green; 
} 
h1 { 
    background-color: #777; 
    margin-bottom: 20px; 
} 
p { 
    background-color: #ccc; 
    margin-top: 15px; 
} 

Answer 1

页边距不垮。如果您想了解更多关于通用崩溃边缘，这里是一对夫妇的文章与启动：

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
• https://css-tricks.com/what-you-should-know-about-collapsing-margins/

---

作为一种变通方法，以使其行为类似于display: block，你可以做这样的事情，在那里你增加一个flex类到container的display: flex，只能定位到h1和p。

如果你不能说做手工，脚本可以做到这一点为你工作。

.wrapper { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 
.container { 
 
    display: flex; 
 
    /* display: block; */ 
 
    flex-flow: column nowrap; 
 
    background-color: green; 
 
} 
 
h1 { 
 
    background-color: #777; 
 
    margin-bottom: 20px; 
 
} 
 
p { 
 
    background-color: #ccc; 
 
    margin-top: 15px; 
 
} 
 

 

 
/* custom classes to remove margin */ 
 
.container.flex h1:first-child { 
 
    margin-top: 0; 
 
} 
 
.container.flex p:last-child { 
 
    margin: 0; 
 
}

<div class="wrapper"> 
 
    <div class="container flex"> 
 
    <h1>header h1</h1> 
 
    <p>plain text</p> 
 
    </div> 
 
</div>