align-self

align-self: stretch;

align-self: center;

align-self: start;

align-self: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

Diese Eigenschaft gilt nicht für Block-Level-Boxen oder Tabellenzellen. Wenn der Querrand eines Flexbox-Elements auto ist, wird align-self ignoriert.

auto

Wird zum align-items-Wert des Elternteils berechnet.

normal

Die Wirkung dieses Schlüsselwortes hängt vom Layout-Modus ab:

• In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzten absolut positionierten Boxen und wie stretch bei allen anderen absolut positionierten Boxen.
• In der statischen Position absolut positionierter Layouts verhält sich das Schlüsselwort wie stretch.
• Für Flex-Elemente verhält sich das Schlüsselwort wie stretch.
• Für Grid-Elemente führt dieses Schlüsselwort zu einem Verhalten ähnlich dem von stretch, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, wo es sich wie start verhält.
• Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenzellen.

self-start

Richtet die Elemente so aus, dass sie bündig mit der Kante des Ausrichtungscontainers sind, die der Startseite des Elements in der Querachse entspricht.

self-end

Richtet die Elemente so aus, dass sie bündig mit der Kante des Ausrichtungscontainers sind, die der Endseite des Elements in der Querachse entspricht.

flex-start

Der Querstart-Rand des Flex-Elements ist mit der Querstart-Kante der Linie bündig.

flex-end

Der Querend-Rand des Flex-Elements ist mit der Querend-Kante der Linie bündig.

center

Die Randbox des Flex-Elements wird innerhalb der Linie auf der Querachse zentriert. Wenn die Quergröße des Elements größer als der Flex-Container ist, wird es gleichmäßig in beide Richtungen überlaufen.

baseline, first baseline, last baseline

Gibt die Teilnahme an der ersten oder letzten Baseline-Ausrichtung an: richtet die Ausrichtungsbaseline des ersten oder letzten Baseline-Satzes der Box mit der entsprechenden Baseline im geteilten ersten oder letzten Baseline-Satz aller Boxen in ihrer Baseline-Sharing-Gruppe aus. Die Fallback-Ausrichtung für first baseline ist start, für last baseline ist sie end.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner als die Größe des Ausrichtungscontainers ist und das Element auf auto-Größe eingestellt ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, wobei dennoch die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen berücksichtigt werden, sodass die kombinierte Größe aller auto-Größe-Elemente den Ausrichtungscontainer entlang der Querachse genau ausfüllt.

anchor-center

Im Fall von ankerverankerten Elementen richtet das Element mittig zum zugehörigen Ankerelement in der Blockrichtung aus. Siehe Zentrierung am Anker mit anchor-center.

safe

Wenn die Größe des Elements den Ausrichtungscontainer überläuft, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus start.

unsafe

Ungeachtet der relativen Größen des Elements und des Ausrichtungscontainers wird der angegebene Ausrichtungswert beachtet.

align-self = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end    

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung im Grid-Layout
• CSS Box-Ausrichtung
• align-items
• justify-self
• place-self