In Flexbox reduzierter Rand

Question

Wenn ein Elternteil und sein letztes Kind einen Rand haben, werden die Ränder in CSS normalerweise verkleinert, um einen einzelnen Rand zu erstellen. Z.B.

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>

Wie Sie sehen können, obwohl sogar eine Marge von 20px sowohl auf die article und die main Tags angegeben ist, können Sie nur einen 20px-Marge zwischen dem letzten Artikel und Fußzeile erhalten.

Bei der Verwendung von flexbox erhalten wir jedoch einen 40px-Abstand zwischen dem letzten Artikel und der Fußzeile - ein voller Abstand von 20px vom Artikel zum Hauptteil und weitere 20px vom Hauptfuß zum Fuß.

#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>

Gibt es eine Möglichkeit Flexbox Margen verhalten sich genauso wie die nicht Flexbox diejenigen zu machen?

Answer 1

Margin Kollabieren ist ein Merkmal eines block formatting context.

Es gibt keinen Spielraum in einem flex formatting context kollabieren.

3. Flex Containers: the flex and inline-flexdisplay values

A flex Behälter stellt einen neuen Flex Formatierungs Kontext für seinen Inhalt. Dies entspricht dem Erstellen eines Blockformatierungskontextes, , mit der Ausnahme, dass das Flex-Layout anstelle des Blocklayouts verwendet wird. Beispiel: Floats dringen nicht in den Flex-Container ein, und die Ränder des Flex-Containers kollidieren nicht mit den Rändern seines Inhalts.