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;
}

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

auto

Berechnet sich zum Wert der übergeordneten align-items.

normal

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

• In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzen absolut positionierten Boxen und wie stretch bei allen anderen absolut positionierten Boxen.
• In statischer Position absolut positionierter Layouts verhält sich das Schlüsselwort wie stretch.
• Für Flex-Items verhält sich das Schlüsselwort wie stretch.
• Für Grid-Items 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, bei denen es sich wie start verhält.
• Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenzellen.

self-start

Richtet die Items so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers sind, der der Startseite des Items in der Kreuzachse entspricht.

self-end

Richtet die Items so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers sind, der der Endseite des Items in der Kreuzachse entspricht.

flex-start

Der Kreuz-Start-Rand des Flex-Items ist mit dem Kreuz-Start-Rand der Linie bündig.

flex-end

Der Kreuz-End-Rand des Flex-Items ist mit dem Kreuz-End-Rand der Linie bündig.

center

Die Margin-Box des Flex-Items wird innerhalb der Linie auf der Kreuzachse zentriert. Wenn die Kreuzgröße des Items größer als der Flex-Container ist, wird sie gleichmäßig in beide Richtungen überlaufen.

baseline, first baseline, last baseline

Gibt die Teilnahme an der ersten oder letzten Baseline-Ausrichtung an: richtet die Ausrichtungs-Baseline des ersten oder letzten Baseline-Sets der Box mit der entsprechenden Baseline im gemeinsamen ersten oder letzten Baseline-Set aller Boxen in ihrer Baseline-Sharing-Gruppe aus. Das Fallback für first baseline ist start, das für last baseline ist end.

stretch

Wenn die kombinierte Größe der Items entlang der Kreuzachse kleiner als die Größe des Ausrichtungscontainers ist und das Item auto-größenmäßig ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, unter Beachtung der durch max-height/max-width (oder entsprechende Funktionalität) auferlegten Beschränkungen, sodass die kombinierte Größe aller auto-größenmäßigen Items genau den Ausrichtungscontainer entlang der Kreuzachse ausfüllt.

anchor-center

Im Fall von verankerungs-positionierten Elementen, richtet das Item in der Blockrichtung auf das Zentrum des zugehörigen Ankerelements aus. Siehe Zentrieren auf dem Anker mit anchor-center.

safe

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

unsafe

Unabhängig von den relativen Größen des Items 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    

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