Einzelne Elemente in Flexbox anders ausrichten als den Rest mit align-self

In einem Talk von Estelle Weyl ist mir eine Flexbox Eigenschaft untergekommen, die ich bisher noch nicht kannte: align-self.

Die Definition laut MDN:

Die align-self CSS Eigenschaft richtet Flexelemente der aktuellen Flexzeile aus und überschreibt dabei den Wert von align-items.

https://developer.mozilla.org/de/docs/Web/CSS/align-self

Wenn man also Elemente mit align-items ausrichtet, kann man mit align-self ein bestimmtes oder mehrere Elemente anders ausrichten. Hätte sicher jede/r von uns schon mal gebraucht.

Ich habe zwei kleine Beispiele zur Illustration auf CodePen gestellt:

See the Pen Flex-box: align-self by Manuel Matuzovic (@matuzo) on CodePen.

Quellen und Ressourcen

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *