CSS-Eigenschaft align-self

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>

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>

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.

Browser-Support

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+


Finden Sie das nützlich?

Ähnliche Artikel