Margen colapsando en flexbox

Normalmente, en CSS, cuando un padre y su último hijo tienen un margen, los márgenes colapsan para crear un margen único. P.ej

article { margin-bottom: 20px } main { background: pink; margin-bottom: 20px; } footer { background: skyblue; } 
 
Item 1
Item 2
Footer

Como puede ver, aunque se especifica un margen de 20 20px tanto en el article como en las tags main , solo obtiene un margen de 20 20px entre el último artículo y el pie de página .

Sin embargo, al usar flexbox , obtenemos un margen de 40px entre el último artículo y el pie de página , un margen completo de 20p x del artículo al principal y otro de 20px del principal al pie de página .

 #container { display: flex; flex-direction: column; } article { margin-bottom: 20px } main { background: pink; margin-bottom: 20px; } footer { background: skyblue; } 
 
Item 1
Item 2
Footer

¿Hay alguna manera de hacer que los márgenes de flexbox se comporten de la misma manera que los que no son de flexbox?

El colapso de margen es una característica del contexto de formato de bloque .

No hay colapso de margen en un contexto de formato flexible .

3. Contenedores flexibles: los valores de display flex y flex inline-flex

Un contenedor flexible establece un nuevo contexto de formato flexible para sus contenidos. Esto es lo mismo que establecer un contexto de formato de bloque, excepto que se usa el diseño flexible en lugar del diseño de bloque. Por ejemplo, los flotadores no se introducen en el contenedor flexible, y los márgenes del contenedor flexible no se colapsan con los márgenes de su contenido.