Warum verhalten sich Flexbox-Ränder anders als in einem Standardblockformatierungskontext?

Rand kollabiert in Flexbox

Wenn in CSS ein übergeordnetes Element und sein letztes untergeordnetes Element einen Rand haben, werden die Ränder normalerweise zu einem einzigen zusammengelegt Marge. In Flexbox verhalten sich Ränder jedoch anders.

Warum Margin Collapse in Flexbox anders ist

Margin Collapse ist eine Funktion eines Blockformatierungskontexts, die in nicht verwendet wird ein flexibler Formatierungskontext. Flexbox erstellt einen neuen Flex-Formatierungskontext für seine Inhalte, was bedeutet, dass Ränder nicht auf die gleiche Weise wie in einem Blockformatierungskontext reduziert werden.

So verhalten sich Flexbox-Ränder wie Nicht-Flexbox-Ränder

Da das Reduzieren von Rändern eine Funktion eines Blockformatierungskontexts ist, ist es nicht möglich, dass sich Flexbox-Ränder genauso verhalten wie Nicht-Flexbox-Ränder diejenigen. Es ist jedoch möglich, einen ähnlichen Effekt zu erzielen, indem Sie die Anzeigeeigenschaft des Flexbox-Containers auf inline-flex statt auf flex setzen. Dadurch wird ein Flexbox-Formatierungskontext erstellt, dieser wird jedoch als Inline-Element behandelt und daher werden die Ränder wie erwartet reduziert.

Zum Beispiel:

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

article {
  margin-bottom: 20px;
}

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

footer {
  background: skyblue;
}

In diesem Fall ist das Die Ränder werden zwischen dem letzten Artikel und der Fußzeile reduziert, was zu einem Rand von 20 Pixeln führt, genau wie bei einem Nicht-Flexbox-Layout.

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