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>