Flexbox はマージンの崩壊を排除しますか?

フレックスボックスでのマージンの折りたたみ

CSS では、親とその最後の子の両方にマージンがある場合、それらのマージンは 1 つのマージンに折りたたまれます。ただし、フレックスボックスを使用すると、この動作が変わります。

フレックスボックスでは、マージンは折りたたまれません。これは、フレックス アイテムの親要素 (フレックス コンテナなど) のマージンがフレックス アイテム自体のマージンと結合しないことを意味します。これにより、フレックスボックス レイアウトの要素間に意図しない間隔が生じる可能性があります。

たとえば、次の CSS を考えてみましょう:

article {
  margin-bottom: 20px;
}

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

footer {
  background: skyblue;
}

この例では、メイン要素内に入れ子になったarticle要素があります。 、フッター要素内にネストされます。フレックスボックスがないと、記事の余白とメインの余白が、記事とフッターの間の 20 ピクセルの単一の余白に崩れてしまいます。ただし、フレックスボックスを使用すると、記事とフッターの間に 40 ピクセルのマージンが確保されます。記事からメインまでは 20 ピクセル、メインからフッターまではさらに 20 ピクセルのマージンになります。

この動作を防ぐには、コンテナ要素からのフレックスボックス レイアウト。例:

#container {
  display: block;
}

コンテナ要素の表示プロパティをブロックに設定すると、フレックスボックスの書式設定コンテキストが削除され、デフォルトのマージン折りたたみ動作が復元されます。

以上がFlexbox はマージンの崩壊を排除しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。