La marge s'effondre dans la flexbox

Question

Généralement, dans le CSS, lorsqu'un parent et son dernier enfant, la marge, la marge de l'effondrement de créer une seule marge. E. g.

article {
  margin-bottom: 20px
}

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

footer {
  background: skyblue;
}

<div id="container">
  <main>
    <article>
      Item 1
    </article>
    <article>
      Item 2
    </article>
  </main>
  <footer>Footer</footer>
</div>

Comme vous pouvez le voir, même si une marge d' 20px est spécifié sur l' article et de la main tags, vous obtenez seulement un 20px de la marge entre le dernier article et le pied de page.

Lors de l'utilisation de flexbox, cependant, nous obtenons un 40px de la marge entre le dernier article et pied de page - un 20px marge de l'article principal, et un autre 20px de main pour le pied de page.

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

article {
  margin-bottom: 20px
}

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

footer {
  background: skyblue;
}

<div id="container">
  <main>
    <article>
      Item 1
    </article>
    <article>
      Item 2
    </article>
  </main>
  <footer>Footer</footer>
</div>

Est-il un moyen de faire flexbox marges se comportent de la même manière que les non-flexbox ceux?

Answer 1

La marge d'effondrement est une caractéristique d'un bloc de mise en forme de contexte.

Il n'y a pas de marge s'effondrer dans un flex de formatage contexte.

3. Conteneurs Flex: l' flex et inline-flex display les valeurs

Un conteneur flex établit un nouveau flex cadre de sa mise en forme contenu. C'est le même que l'établissement d'un bloc de mise en forme de contexte, sauf que flex mise en page est utilisé à la place de la disposition en bloc. Par exemple, flotteurs de ne pas s'immiscer dans le conteneur flex et flex conteneur des marges de ne pas s'effondrer avec les marges de son contenu.