CSS align-self Eigenschaft

Die CSS-Eigenschaft align-self richtet ein einzelnes Flex- oder Grid-Element entlang der Querachse seines Containers aus und überschreibt dabei den am Container gesetzten Wert von align-items.

Während align-items alle Elemente im Container gleichzeitig ausrichtet, ermöglicht align-self die individuelle Ausrichtung eines einzelnen Elements. Diese Eigenschaft verwendet man, wenn ein Element eine abweichende Ausrichtung benötigt – zum Beispiel, um ein Logo oben in einer Header-Zeile zu fixieren, während die übrigen Elemente vertikal zentriert bleiben.

align-self hat nur dann eine Wirkung, wenn sich das Element in einem Flex-Container, einem Grid-Container befindet oder absolut positioniert ist. Bei einem normalen Block-Level-Element hat die Eigenschaft keinen Effekt – deshalb bewirkt ein Wert wie stretch nichts, bis man auch display: flex (oder grid) am übergeordneten Element setzt. Sie gehört zu den CSS3-Eigenschaften.

Beziehung zu align-items

Das Verhältnis ist „Container vs. Element":

align-items wird am Container gesetzt und richtet alle Elemente entlang der Querachse aus.
align-self wird an einem einzelnen Element gesetzt und überschreibt für dieses eine Element, was der align-items-Wert des Containers vorgibt.

Da align-self dieselben Werte wie align-items akzeptiert, muss man die Wertmenge nur einmal lernen. Das Standard-auto bedeutet schlicht „verwende den align-items-Wert des Containers", sodass ein Element ohne align-self dem allgemeinen Verhalten folgt.

Info

align-self wird ignoriert, wenn das Flex-Element einen auto-Außenabstand (vertikalen Margin) hat – der automatische Margin gewinnt und absorbiert den freien Platz. Außerdem hat die Eigenschaft keinen Effekt auf Tabellenzellen oder eigenständige Block-Level-Boxen, die keine Flex/Grid-Elemente sind.

Anfangswert	auto
Gilt für	Flex-Elemente, Grid-Elemente und absolut positionierte Boxen.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.alignSelf = "auto";

Syntax

Syntax der CSS align-self-Eigenschaft

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

Beispiel der align-self-Eigenschaft:

Beispiel der CSS align-self-Eigenschaft mit dem Wert flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(1) {
        align-self: flex-start;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the first box is set to "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Probier es selbst »

Ergebnis

Das align-items: center des Containers hält die Boxen #2 und #3 vertikal zentriert, während Box #1 – mit align-self: flex-start – nach oben springt und den Container-Wert nur für sich selbst überschreibt.

Hier ist ein Beispiel, bei dem drei Boxen verwendet werden und die zweite mit dem Wert „flex-end" angegeben ist.

Beispiel der align-self-Eigenschaft mit dem Wert „flex-end":

Beispiel der CSS align-self-Eigenschaft mit dem Wert flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: flex-end;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Probier es selbst »

Beispiel mit dem Wert „stretch":

Standardmäßig nimmt ein Flex-Element nur die Höhe ein, die sein Inhalt benötigt. Setzt man align-self: stretch auf ein einzelnes Element, wächst dieses eine Element auf die volle Quergröße des Containers, während die anderen ihre natürliche Höhe behalten. Damit stretch wirkt, muss die height des Elements nicht gesetzt (oder auf auto) sein.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: stretch;
        height: auto;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "stretch".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

align-self in CSS Grid

align-self ist nicht auf Flexbox beschränkt – die Eigenschaft funktioniert auf dieselbe Weise in einem Grid-Container und richtet ein Grid-Element entlang der Block-(Spalten-)Achse seines Grid-Bereichs aus:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* default for every item */
}
.grid .featured {
  align-self: start; /* this one item hugs the top of its cell */
}

In CSS Grid werden die Schlüsselwörter start und end anstelle von flex-start und flex-end verwendet, das Konzept ist jedoch identisch: Der Container setzt einen Standard mit align-items, und align-self überschreibt diesen pro Element.

Wann man align-self verwendet

Ein einzelnes abweichendes Element. Die meisten Elemente sollen sich auf eine Weise ausrichten, aber ein einzelnes Element (ein Icon, ein Badge, ein Call-to-Action) benötigt eine andere Position.
Oben oder unten fixieren in einer zentrierten Zeile. Eine Navigationsleiste, die ihre Links vertikal zentriert, aber ein Logo oben fixiert.
Eine Karte strecken lassen. In einer Reihe gleichhoher Karten wird genau eine gezwungen, die Höhe mit align-self: stretch vollständig auszufüllen.

Wenn jedes Element dieselbe Ausrichtung benötigt, setzt man stattdessen align-items am Container – das ist sauberer als align-self bei jedem Kind zu wiederholen.

Werte

Wert	Beschreibung	Ausprobieren
auto	Das Element übernimmt die align-items-Eigenschaft seines übergeordneten Containers. Dies ist der Standardwert.	Ausprobieren »
stretch	Lässt Elemente wachsen, um den Container auszufüllen.	Ausprobieren »
center	Elemente werden in der Mitte des Containers platziert.	Ausprobieren »
flex-start	Elemente werden am Anfang des Containers platziert.	Ausprobieren »
flex-end	Elemente werden am Ende des Containers platziert.	Ausprobieren »
baseline	Elemente werden an der Grundlinie des Containers positioniert.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was bewirkt die Eigenschaft 'align-self' in CSS?

Sie ermöglicht es, die Standardausrichtung oder die durch align-items festgelegte Ausrichtung für einzelne Flex-Elemente zu überschreiben.Sie wird verwendet, um die Hintergrundfarbe eines Elements zu ändern.Sie erstellt eine neue Ebene auf der Webseite.Sie richtet Flex-Elemente entlang der vertikalen Linie innerhalb ihrer Container aus.