CSS-align-content Eigenschaft

Definition und Verwendung

align-content Eigenschaftsänderung flex-wrap Verhalten der Eigenschaft. Es ist align-items Ähnlich, aber es ausrichtet nicht die elastischen Elemente, sondern die elastischen Linien.

Achtung:Es müssen mehrere Zeilenprojekte vorhanden sein, damit diese Eigenschaft aktiviert wird!/

Tipp:Verwenden justify-content Diese Eigenschaft kann die horizontalen Ausrichtungen der Elemente auf der Hauptachse (main-axis) ausrichten.

Weitere Informationen siehe:

CSS Tutorial:CSS Flexbox

CSS Tutorial:CSS Grid

CSS Referenzhandbuch:align-items-Eigenschaft

CSS Referenzhandbuch:align-self-Eigenschaft

CSS Referenzhandbuch:justify-content-Eigenschaft

HTML DOM Referenzhandbuch:alignContent-Eigenschaft

Beispiel

Packen Sie die Zeilen in die Mitte des elastischen Containers:

div {
  breite: 70px;
  höhe: 300px;
  border: 1px solide #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
stretch Standardwert. Zeilen dehnen sich aus, um den verbleibenden Raum zu füllen.
center Zeilen werden gegen die Mitte des elastischen Containers gepackt.
flex-start Zeilen werden gegen den Anfang des elastischen Containers gepackt.
flex-end Zeilen werden gegen das Ende des elastischen Containers gepackt.
space-between Zeilen werden gleichmäßig im elastischen Container verteilt.
space-around Zeilen werden gleichmäßig im elastischen Container verteilt, wobei jede Seite zur Hälfte belegt ist.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: stretch
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.alignContent="center"

Browser-Unterstützung

Die in der Tabelle genannten Zahlen zeigen die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0