align-self

Die `align-self`-Eigenschaft ist eine Untereigenschaft des Flexible Box Layout Moduls.

Sie ermöglicht es, den `align-items`-Wert für bestimmte Flex-Items zu überschreiben.

Die `align-self`-Eigenschaft akzeptiert die gleichen 5 Werte wie `align-items`

• flex-start: Die Cross-Start-Kante des Items wird an der Cross-Start-Linie platziert
• flex-end: Die Cross-End-Kante des Items wird an der Cross-End-Linie platziert
• center: Das Item wird in der Cross-Achse zentriert
• baseline: Die Items werden so ausgerichtet, dass ihre Grundlinien übereinstimmen
• stretch (Standard): Streckt sich, um den Container auszufüllen (beachtet weiterhin min-width/max-width)

Syntax

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

.flex-item {
  align-self: flex-end;
}

Demo

Das folgende Demo zeigt, wie sich ein Item je nach `align-self`-Wert im Flex-Container ausrichten kann

• Das 1. Item ist auf `flex-start` gesetzt
• Das 2. Item ist auf `flex-end` gesetzt
• Das 3. Item ist auf `center` gesetzt
• Das 4. Item ist auf `baseline` gesetzt
• Das 5. Item ist auf `stretch` gesetzt

Siehe den Pen align-self demo von CSS-Tricks (@css-tricks) auf CodePen.

Verwandte Eigenschaften

• flex-grow
• flex-shrink
• flex-basis
• flex
• order

Weitere Ressourcen

• align-self in der Spezifikation
• align-self bei MDN
• Fortgeschrittenes Cross-Browser-Flexbox
• Ein Leitfaden zu Flexbox
• Verwendung von Flexbox
• Alte Flexbox und neue Flexbox

Browser-Unterstützung

Für weitere Informationen darüber, wie man Synthesen mischt, um die beste Browserunterstützung zu erzielen, siehe diesen Artikel (CSS-Tricks) oder diesen Artikel (DevOpera).