Style-alignContent-Eigenschaft

Definition und Verwendung

Wenn die Projekte nicht den gesamten verfügbaren Raum auf der Waagerechten (vertikal) verwendenalignContent Eigenschaft, um die Projekte des flexiblen Containers auszurichten.

Tipp:Verwenden Sie justifyContent-Eigenschaft Positionieren Sie die Projekte in der Hauptachse (horizontal).

Anmerkung:Es müssen mehrere Zeilenprojekte vorhanden sein, damit diese Eigenschaft aktiviert wird.

Beispiel

Platzieren Sie die flexiblen <div>-Elemente der Projekte zwischen den Zeilen mit Leerzeichen:

document.getElementById("main").style.alignContent = "space-between";

Versuchen Sie es selbst

Syntax

Rückgabewert der alignContent-Eigenschaft:

object.style.alignContent

Setzen Sie die alignContent-Eigenschaft:

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

Eigenschaftswert

Wert Beschreibung
stretch Standardwert. Die Zeile dehnt sich aus, um den verbleibenden Raum zu füllen.
center Die Projekte sind in der Mitte des Containers positioniert.
flex-start Die Projekte sind am Anfang des Containers positioniert.
flex-end Die Projekte sind am Ende des Containers positioniert.
space-between Die Projekte sind zwischen den Zeilen mit Leerzeichen positioniert.
space-around Die Projekte haben vor der Zeile, zwischen der Zeile und nach der Zeile einen Leerzeichen.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft von ihrem Elternelement erben. Siehe inherit.

Technische Details

Standardwert: stretch
Rückgabewert: Zeichenkette, die den align-content-Eigenschaft.
CSS-Version: CSS3

Browser-Unterstützung

alignContent Es ist eine CSS3 (1999) Eigenschaft.

Alle Browser unterstützen es vollständig:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt 11

Verwandte Seiten

CSS Referenzhandbuch:align-content-Eigenschaft

HTML DOM STYLE Referenzhandbuch:alignItems-Eigenschaft

HTML DOM STYLE Referenzhandbuch:alignSelf-Eigenschaft

HTML DOM STYLE Referenzhandbuch:justifyContent-Eigenschaft