#align-content
Legt fest, wie jede Zeile innerhalb eines Flexbox/Grid-Containers ausgerichtet wird. Sie gilt nur, wenn flex-wrap: wrap vorhanden ist und wenn es mehrere Zeilen von Flexbox/Grid-Elementen gibt.
default align-content: stretch;
Jede Zeile wird so gedehnt, dass sie den verbleibenden Platz ausfüllt.
In diesem Fall ist der Container 300px hoch. Alle Boxen sind 50px hoch, außer der zweiten, die 100px hoch ist.
- Die erste Zeile ist 100px hoch
- Die zweite Zeile ist 50px hoch
- Der verbleibende Platz ist 150px
Dieser verbleibende Platz wird gleichmäßig auf die beiden Zeilen verteilt:
- Die erste Zeile ist jetzt 175px hoch
- Die zweite Zeile ist jetzt 125px hoch
align-content: flex-start;
Jede Zeile füllt nur den Platz, den sie benötigt. Sie bewegen sich alle in Richtung des Starts der Querachse des Flexbox/Raster-Containers.
align-content: flex-end;
Jede Zeile füllt nur den Platz, den sie benötigt. Sie bewegen sich alle zum Ende der Querachse des Flexbox/Grid-Containers.
align-content: center;
Jede Zeile füllt nur den Platz, den sie benötigt. Sie bewegen sich alle in Richtung der Mitte der Querachse des Flexbox/Grid-Containers.
align-content: space-between;
Jede Zeile füllt nur den Platz, den sie benötigt. Der verbleibende Platz wird zwischen den Zeilen erscheinen.
align-content: space-around;
Jede Zeile füllt nur den Platz, den sie benötigt. Der verbleibende Platz wird gleichmäßig um die Zeilen verteilt: vor der ersten Zeile, zwischen den beiden, und nach der letzten.
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022
