CSS-Property align-self

Definition und Verwendung

align-self bestimmt die Ausrichtung des ausgewählten Elements im flexiblen Container.

Hinweis:Die Eigenschaft align-self überschreibt die Eigenschaft des flexiblen Containers align-items Eigenschaften.

Weitere Informationen:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Flexbox

CSS Referenzhandbuch:alignContent-Eigenschaft

CSS Referenzhandbuch:alignItems-Eigenschaft

CSS Referenzhandbuch:justifySelf-Eigenschaft

HTML DOM Referenzhandbuch:alignSelf-Eigenschaft

Beispiel

Einen der Elemente im flexiblen Container zentriert ausrichten:

#myBlueDiv {
  align-self: center;
}

Versuchen Sie es selbst

CSS-Syntax

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Standard. Das Element vererbt die Eigenschaft align-items des übergeordneten Containers, wenn kein übergeordneter Container vorhanden ist, dann "stretch".
stretch Das Element wird gestreckt, um den Container anzupassen.
center Das Element befindet sich in der Mitte des Containers.
flex-start Das Element befindet sich am Anfang des Containers.
flex-end Das Element befindet sich am Ende des Containers.
Baseline Das Element wird in die Baseline des Containers positioniert.
initial Setzen Sie diese Eigenschaft auf ihren Standardwert. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: auto
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.alignSelf="center"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

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