Wie verhalten sich Ränder in Flexbox anders als im Standard-CSS-Layout?

Randkollaps in Flexbox

In CSS werden Ränder benachbarter Elemente normalerweise minimiert, um einen einzelnen Rand zu erzeugen. Bei Flexbox-Containern unterscheidet sich dieses Verhalten jedoch.

Das Problem: Nicht-Flexbox- vs. Flexbox-Ränder

Bei Verwendung eines Nicht-Flexbox-Layouts werden Ränder auf einem übergeordneten Element angezeigt und sein letztes Kind kollabiert:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Allerdings in einer Flexbox Container:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Die Ränder kollabieren nicht mehr, was zu einer größeren Lücke zwischen dem letzten Artikel und der Fußzeile führt.

Den Unterschied verstehen

Bei Blockformatierungskontexten kommt es zu Randeinbrüchen. Flexbox-Container erstellen jedoch einen anderen Kontexttyp, der als Flex-Formatierungskontext bezeichnet wird.

Gemäß der CSS-Box-Modell-Spezifikation:

„Ein Flex-Container erstellt einen neuen Flex-Formatierungskontext für seinen Inhalt.“ Dies entspricht dem Einrichten eines Blockformatierungskontexts, mit der Ausnahme, dass das Flex-Layout anstelle des Blocklayouts verwendet wird anders behandelt als ein normales Blocklayout. Floats dringen nicht in den Flex-Container ein und die Ränder des Containers bleiben von den Rändern seiner untergeordneten Elemente getrennt.

Das obige ist der detaillierte Inhalt vonWie verhalten sich Ränder in Flexbox anders als im Standard-CSS-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!