Align-content

Die align-content Eigenschaft ist eine Untereigenschaft des Flexible Box Layout Moduls.

Sie hilft dabei, die Zeilen eines Flex-Containers innerhalb dieses auszurichten, wenn zusätzlicher Platz in der Querachse vorhanden ist, ähnlich wie justify-content einzelne Elemente entlang der Hauptachse ausrichtet.

Beachten Sie, dass diese Eigenschaft keine Auswirkung hat, wenn das Flexbox-Element nur eine einzige Zeile hat.

Die align-content Eigenschaft akzeptiert 6 verschiedene Werte

flex-start: Zeilen am Anfang des Containers gepackt
flex-end: Zeilen am Ende des Containers gepackt
center: Zeilen in der Mitte des Containers gepackt
space-between: Zeilen gleichmäßig verteilt; die erste Zeile befindet sich am Anfang des Containers, während die letzte sich am Ende befindet
space-around: Zeilen gleichmäßig verteilt mit gleichem Abstand dazwischen
stretch (Standard): Zeilen werden gestreckt, um den verbleibenden Platz auszufüllen

Die folgende Abbildung hilft zu verstehen, wie die Zeilen je nach align-content Wert in einem Flex-Container gestapelt werden

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | stretch

.flex-container {
  align-content: space-around;
}

Demo

Die folgende Demo zeigt, wie die Zeilen je nach align-content Wert angeordnet werden

Die rote Liste ist auf flex-start eingestellt
Die gelbe Liste ist auf flex-end eingestellt
Die blaue Liste ist auf center eingestellt
Die grüne Liste ist auf space-between eingestellt
Die pinke Liste ist auf space-around eingestellt
Die braune Liste ist auf stretch eingestellt

Browser-Unterstützung

Dies ist die Unterstützung für Flexbox als Ganzes, die dieselbe sein sollte wie für diese Eigenschaft, da sie gewissermaßen eine ursprüngliche Eigenschaft ist.

Diese Browser-Support-Daten stammen von Caniuse, das mehr Details bietet. Eine Zahl zeigt an, dass der Browser die Funktion ab dieser Version und höher unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
21*	28	11	12	6.1*

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	4.4	7.0-7.1*

Weitere Informationen darüber, wie man Syntaxe mischt, um die beste Browser-Unterstützung zu erzielen, finden Sie in diesem Artikel (CSS-Tricks) oder diesem Artikel (DevOpera).