margem em colapso em flexbox

em css, as margens dos elementos adjacentes normalmente entram em colapso para criar uma única margem. No entanto, nos contêineres Flexbox, esse comportamento difere. Margin-Bottom: 20px; } principal { Margin-Bottom: 20px; }

No entanto, em um contêiner Flexbox: #contêiner { exibição: flex; Direcção flexível: coluna; } artigo { Margin-Bottom: 20px; } principal { Margin-Bottom: 20px; }

As margens não entram mais em colapso, resultando em uma lacuna maior entre o último artigo e o rodapé. No entanto, os contêineres do Flexbox criam um tipo diferente de contexto chamado contexto de formatação flex. As margens não entram em colapso porque o conteúdo é tratado de maneira diferente de um layout de bloco normal. Os carros alegóricos não se intrometem no recipiente flexível, e as margens do contêiner permanecem separadas das margens de seus elementos filhos.