標準の CSS レイアウトと比較して、Flexbox ではマージンの動作がどのように異なりますか?

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

CSS では、通常、隣接する要素のマージンが折りたたまれて 1 つのマージンが作成されます。ただし、フレックスボックス コンテナでは、この動作は異なります。

問題: 非フレックスボックスとフレックスボックスのマージン

非フレックスボックス レイアウトを使用する場合、親要素のマージンそして最後の子は折りたたまれます:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

ただし、フレックスボックス内ではコンテナ:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

余白が崩れなくなり、最後の記事とフッターの間の隙間が大きくなります。

違いを理解する

マージンの崩壊は、ブロックの書式設定コンテキストで発生します。ただし、フレックスボックス コンテナは、フレックス フォーマット コンテキストと呼ばれる別のタイプのコンテキストを作成します。

CSS ボックス モデル仕様によると、

「フレックス コンテナは、そのコンテンツに対して新しいフレックス フォーマット コンテキストを確立します。これは、ブロック レイアウトの代わりにフレックス レイアウトが使用される点を除いて、ブロック フォーマット コンテキストの確立と同じです。"

フレックス内コンテキストをフォーマットすると、コンテンツが通常のブロック レイアウトとは異なる方法で処理されるため、マージンが崩れることはありません。フロートはフレックスコンテナに侵入せず、コンテナのマージンは子要素のマージンから分離されたままになります。

以上が標準の CSS レイアウトと比較して、Flexbox ではマージンの動作がどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。