Flexbox: Was ist der Unterschied zwischen „align-items' und „align-content'?

Flexbox: Die Unterschiede zwischen align-content und align-items verstehen

Wenn es um das Flexbox-Layout geht, align-items und align-items Inhaltseigenschaften dienen unterschiedlichen Zwecken bei der Ausrichtung von Inhalten innerhalb von Flex Container.

align-items

align-items richtet Elemente entlang der Querachse des Flex-Containers aus. Diese Querachse steht senkrecht zur Richtung der Hauptachse, die durch die Eigenschaft der Biegerichtung bestimmt wird. Standardmäßig ist Flex-Richtung: Zeile, sodass die Hauptachse horizontal und die Querachse vertikal ist.

align-items kann verschiedene Werte haben, um Elemente vertikal auszurichten: Start, Ende, Mitte, Dehnung und baseline.

align-content

Im Gegensatz dazu richtet align-content Zeilen von Elementen innerhalb eines mehrzeiligen Flex aus Behälter. Wenn nur eine Zeile mit Elementen vorhanden ist, hat align-content keine Auswirkung. Diese Eigenschaft kommt ins Spiel, wenn aufgrund der begrenzten Containerbreite mehrere Zeilen gebildet werden.

align-content nimmt auch verschiedene Werte an:

• flex-start: Zeilen von Elementen werden nach oben ausgerichtet ihres umschließenden Raums
• Flex-Ende: Linien von Elementen werden am unteren Rand ihres umschließenden Raums ausgerichtet
• Mitte: Linien von Elementen werden vertikal ausgerichtet die Mitte ihres enthaltenden Raums
• space-between: Linien von Elementen verteilen sich gleichmäßig entlang der vertikalen Achse mit Lücken dazwischen
• space-around: Linien von Elementen verteilen sich gleichmäßig entlang der vertikalen Achse mit Lücken sowohl davor als auch danach

Beispiel

Bedenken Sie Folgendes Code:

.container {
  display: flex;
  flex-direction: row;
}

.item {
  align-items: center;
  align-content: space-around;
}

In diesem Beispiel richtet align-items: center die untergeordneten Elemente vertikal in der Mitte ihres enthaltenden Raums aus, der das Element ist. align-content: space-around richtet die Zeilen von Elementen vertikal aus, mit Lücken zwischen und nach ihnen. Das Ergebnis ist eine vertikal zentrierte Reihe von Elementen mit Lücken zwischen den einzelnen Linien.

Das obige ist der detaillierte Inhalt vonFlexbox: Was ist der Unterschied zwischen „align-items' und „align-content'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!