Wie unterscheidet sich Margin Collapsed zwischen herkömmlichem CSS und Flexbox?

Rand kollabiert in Flexbox

Wenn in herkömmlichem CSS sowohl ein übergeordnetes Element als auch sein letztes untergeordnetes Element Ränder haben, werden die Ränder zu einem einzigen Rand zusammengelegt. Bei Verwendung von Flexbox ändert sich dieses Reduzierverhalten jedoch.

In Flexbox werden Elemente innerhalb eines Flex-Containers mithilfe der display:flex-Eigenschaft ausgerichtet. Dadurch wird ein flexibler Formatierungskontext erstellt, der sich von einem Blockformatierungskontext hinsichtlich der Randreduzierung unterscheidet.

In einem Blockformatierungskontext werden Ränder wie folgt reduziert:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 20px margin between the last article and footer -->

In a Flex-Formatierungskontext, Ränder werden nicht reduziert:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 40px margin between the last article and footer -->

Dieser Unterschied im Verhalten ist auf die separaten Formatierungsregeln von Flexbox zurückzuführen. In einem Flex-Kontext werden Ränder einzeln auf jedes Element innerhalb des Containers angewendet, was zu nicht reduzierten Rändern führt.

Das obige ist der detaillierte Inhalt vonWie unterscheidet sich Margin Collapsed zwischen herkömmlichem CSS und Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!