フレックスボックスのマージンの崩壊

Question

通常、CSSでは、親とその最後の子にマージンがあると、マージンが崩壊して1つのマージンが作成されます。例えば。

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>

あなたが見ることができるように、20ピクセルのマージンがarticleとmainタグの両方に指定されているにもかかわらず、あなただけの最後の記事とフッターの間に20ピクセルのマージンを取得します。

フレックスボックスを使用している場合、最後の記事とフッターの間に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>

フレキシボックスのマージンが非フレキシボックスのものと同じように振る舞うようにする方法はありますか？

Answer 1

マージン折りたたみは、block formatting contextの機能です。

flex formatting contextには余白がありません。

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

フレックスコンテナはその 内容のための新しいフレックスの書式コンテキストを確立します。これは、ブロックレイアウトの代わりにフレックスレイアウトが使用されることを除いて、ブロックフォーマットコンテキスト を設定するのと同じです。たとえば、 浮動小数点はフレックスコンテナに侵入せず、フレキシブルなコンテナの余白は内容の余白で崩壊しません。