Heim >Web-Frontend >CSS-Tutorial >Wie verhalten sich Ränder in Flexbox anders als im Standard-CSS-Layout?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-26 02:20:15779Durchsuche

How Do Margins Behave Differently in Flexbox Compared to 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn