フレックスボックスのマージンが子どもの間で崩壊する

Question

2つの要素が表示付きコンテナ内にあります。ブロックマージンが崩壊しますが、表示されます。 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

1はdisplay: flexを使用するときにマージンは崩壊しません。それを動作させるために、回避策として

• 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に似ていますが、のクラスにのクラスを追加すると、h1とをターゲットにして、display: flexのクラスを追加することができます0。

手動で行うことができない場合は、スクリプトを使用してそのスクリプトを実行できます。

.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>