CSS/Eigenschaften/align-content

Browserunterstützung
caniuse.com

Die Eigenschaft align-content legt fest, wie die Querachse eines mehrzeiligen Layoutcontainers (Grid: Zeilen, Flexbox mit wrap: quer zur Hauptrichtung) in dem verfügbaren Platz verteilt werden. Falls Sie eine vertikale Schreibrichtung eingestellt haben, lesen Sie „Zeilen“ bitte als Spalten. Die Ausrichtung der Flexitems bzw. Gridzellen innerhalb der Zeile steuern Sie dagegen mit align-items oder align-self.

Erlaubte Werte

• Positionierte Ausrichtung - zwischen den Zeilen ist kein Abstand, sie werden als gemeinsame Gruppe im verfügbaren Platz angeordnet.
  • start (flex-start): Alle Zeilen werden an der Startseite des Layoutcontainers angeordnet (Grid und Row-Flexbox oben, Column-Flexbox: links)
  • end (flex-end: Alle Zeilen werden an der Endeseite des Layoutcontainers angeordnet (unten bzw. rechts)
  • center: Die Zeilen werden auf der Querachse zentriert, am Rand der Querachse kann Platz frei bleiben
• Verteilte Ausrichtung
  Die Zeilenhöhen werden zunächst basierend auf den übrigen Angaben bestimmt. Ist die Summe aller Zeilenhöhen danach geringer als der Platz auf der Querachse, wird dieser Platz verteilt.
  • stretch: (Standardwert) Der ungenutzte Platz wird gleichmäßig auf die Zeilen verteilt. Flex- oder Griditems, die ihre Höhe an die Zeilenhöhe anpassen können, werden dadurch gestreckt.
  • space-around: Der ungenutzte Platz wird am Anfang der Querachse, zwischen den Zeilen und am Ende der Querachse verteilt. Der Anteil am Anfang und Ende der Querachse ist halb so groß wie der Anteil zwischen den Zeilen.
  • space-between: Der ungenutzte Platz wird nur zwischen den Zeilen verteilt. Am Anfang und am Ende der Querachse stoßen die Zeilen an den Rand des Layoutcontainers
  • space-evenly: Der ungenutzte Platz wird am Anfang der Querachse, zwischen den Zeilen und am Ende der Querachse verteilt. Der Anteil am Anfang und Ende der Querachse ist genau so groß wie der Anteil zwischen den Zeilen.
• Baseline-Ausrichtung
  • baseline, first baseline, last baseline (TBD)

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

stretch

anwendbar auf

mehrzeilige Flexbox, Grid und - seit April 2024 - beliebige Blockelemente

Vererbung

nein

animierbar

nein

Beispiel

.vorne  {
  align-content: flex-start;
}
.mittig {
  align-content: center;
}

• flex-start: Alle Elemente werden oben angeordnet
• mittig: alle Elemente werden mit align-content: center; mittig angeordnet, ein möglicher Abstand ist oben und unten

Beachten Sie: Diese Eigenschaft hat keine Auswirkungen auf einzeilige Flex-Container (d.h. solche mit flex-wrap: nowrap).
Wenn Sie flex-flow: row wrap; verwenden wollen, müssen Sie die (browsereigene) margin der flexiblen Elemente auf 0 stellen, da sonst die flexiblen Elemente aus dem Eltern-Container hinausragen

Siehe auch

• CSS/Tutorials/Flexbox/Ausrichtung#align-content
• CSS/Tutorials/Grid/Ausrichtung von Grid-Items#align-content

Weblinks

• Spezifikation (W3C): CSS Flexible Box Layout Module Level 1 - align-content
• MDN: align-content
• Details: caniuse.com