CSS-Eigenschaft align-self

❮ Vorige Nächste ❯

Die CSS-Eigenschaft align-self wird verwendet, um die ausgewählten Elemente innerhalb der aktuellen Flexline auszurichten und die Werte von align-items zu überschreiben.

Diese Eigenschaft wird ignoriert, wenn bei einer von Flex-Elementen die vertikale Marge auf "auto" gesetzt ist.

Diese Eigenschaft align-self unterstützt die gleichen Werte wie die Eigenschaft align-items:

auto
stretch
flex-start
flex-end
center
baseline

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft align-self</h2>
    <p>Hier ist die Ausrichtung für die erste Box auf "flex-start" gesetzt.</p>
  <section>
  <div>Box #1</div>
  <div>Box #2</div>
  <div>Box #3</div>
</section>
  </body>
</html>

Versuch es selber!

Hier ist ein Beispiel, bei dem drei Boxen verwendet werden und der zweite durch den Wert "flex-end" angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft align-self</h2>
    <p>Hier wird die Ausrichtung für die zweite Box auf "flex-end" eingestellt.</p>
  <section>
  <div>Box #1</div>
  <div>Box #2</div>
  <div>Box #3</div>
</section>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Das Element erbt die Eigenschaft align-items des übergeordneten Containers. Das ist der Standardwert der Eigenschaft.
stretch	Es lässt die Einträge dehnen, damit sie in den Container passen. Das ist der Standardwert für diese Eigenschaft.
center	Die Einträge werden in der Mitte des Containers platziert.
flex-start	Die Einträge werden am Anfang des Containers platziert.
flex-end	Die Einträge werden am Ende des Containers platziert.
baseline	Die Elemente werden an der Basislinie des Containers platziert.
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.