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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

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

auto

Berechnet sich auf den Wert des übergeordneten Elements für 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 ersetzten absolut positionierten Boxen und wie stretch bei allen anderen absolut positionierten Boxen.
• In der statischen Positionierung 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 Tabellenelementzellen.

self-start

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

self-end

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

flex-start

Der Querstart-Abstandsrand des Flex-Elements wird mit dem Querstart-Rand der Linie bündig ausgerichtet.

flex-end

Der Querend-Abstandsrand des Flex-Elements wird mit dem Querend-Rand der Linie bündig ausgerichtet.

center

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

baseline, first baseline, last baseline

Gibt die Teilnahme an der ersten oder letzten Basislinienausrichtung an: richtet die Ausrichtungsbasislinie des Satzes der ersten oder letzten Basislinie der Box mit der entsprechenden Basislinie in der gemeinsamen ersten oder letzten Basislinie aller Boxen in ihrer Gruppe aus. Die Rückfallausrichtung 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 ist als die Größe des Ausrichtungscontainers und das Element automatisch dimensioniert ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, wobei die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Beschränkungen respektiert werden, sodass die kombinierte Größe aller automatisch dimensionierten Elemente den Ausrichtungscontainer entlang der Querachse genau ausfüllt.

anchor-center

Im Fall von ankerpositionierten Elementen wird das Element in der Blockrichtung zum Zentrum des zugehörigen Ankerelements ausgerichtet. Siehe Zentrierung am Anker mit anchor-center.

safe

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

unsafe

Unabhängig von den 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    

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