フレックスボックスのマージンが標準のブロック書式設定コンテキストとは異なる動作をするのはなぜですか?

Flexbox でのマージンの折りたたみ

通常、CSS では、親とその最後の子にマージンがある場合、マージンは 1 つに折りたたまれます。マージン。ただし、フレックスボックスでは、マージンの動作が異なります。

マージンの折りたたみがフレックスボックスで異なる理由

マージンの折りたたみはブロック フォーマット コンテキストの機能であり、フレックスボックスでは使用されません。フレックスフォーマットコンテキスト。 Flexbox は、コンテンツに対して新しいフレックス フォーマット コンテキストを確立します。つまり、ブロック フォーマット コンテキストと同じようにマージンが折りたたまれません。

フレックスボックスのマージンを非フレックスボックスのマージンのように動作させる方法

マージンの折りたたみはブロック書式設定コンテキストの機能であるため、フレックスボックスのマージンを動作させることはできません非フレックスボックスのものとまったく同じです。ただし、フレックスボックス コンテナの表示プロパティを flex ではなく inline-flex に設定することで、同様の効果を実現することができます。これにより、フレックスボックスの書式設定コンテキストが作成されますが、インライン要素として扱われるため、予想通り余白が折りたたまれます。

例:

#container {
  display: inline-flex;
  flex-direction: column;
}

article {
  margin-bottom: 20px;
}

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

footer {
  background: skyblue;
}

この場合、最後の記事とフッターの間でマージンが折りたたまれ、非フレックスボックス レイアウトと同様に 20 ピクセルのマージンが生じます。

以上がフレックスボックスのマージンが標準のブロック書式設定コンテキストとは異なる動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。