マージン折りたたみは従来の CSS と Flexbox でどのように異なりますか?

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

従来の CSS では、親要素とその最後の子の両方にマージンがある場合、マージンは 1 つのマージンに折りたたまれます。ただし、Flexbox を使用する場合、この折りたたみ動作は変更されます。

Flexbox では、要素は、display: flex プロパティを使用してフレックス コンテナ内で整列されます。これにより、フレックス フォーマット コンテキストが作成されます。これは、マージンの折りたたみという点でブロック フォーマット コンテキストとは異なります。

ブロック フォーマット コンテキストでは、マージンは次のように折りたたまれます。

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 20px margin between the last article and footer -->

ただし、フレックス フォーマット コンテキスト、マージンは折りたたまれません:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 40px margin between the last article and footer -->

この動作の違いは、Flexbox の別個のコンテキストによるものです。書式設定のルール。フレックス コンテキストでは、マージンはコンテナ内の各要素に個別に適用され、マージンが折りたたまれません。

以上がマージン折りたたみは従来の CSS と Flexbox でどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。