Flexbox: Einzelausrichtung mit Align-Items und Align-Self

In dieser Anleitung lernst du, wie man die Flexbox-Eigenschaften align-items und align-self in CSS nutzt, um die Ausrichtung einzelner Elemente in einem Flex-Container zu steuern. Während align-items die Ausrichtung aller direkten Kinder eines Containers festlegt, ermöglicht es align-self, individuell für jedes Kind-Elemement differenzierte Einstellungen vorzunehmen. Wir werden die Konzepte schrittweise durchgängigen, sodass du am Ende genau weißt, wie du diese Eigenschaften effektiv einsetzen kannst.

Wichtigste Erkenntnisse

• align-items definiert die Ausrichtung aller Kinder eines Flex-Containers.
• align-self ermöglicht die individuelle Ausrichtung einzelner Flex-Elemente innerhalb des Containers.
• Stretch ist der Standardwert für align-items und sorgt dafür, dass die Kinder den verfügbaren Raum ausfüllen.

Schritt-für-Schritt-Anleitung

Zuerst schauen wir uns an, wie die Grundkonfiguration des Flex-Containers aussieht und wie wir die Ausrichtung der Kinder durch align-items beeinflussen können.

Hier definierst du einen Container mit display: flex;. In diesem Container kannst du dann die Ausrichtung durch align-items einstellen, beispielsweise auf stretch, was bedeutet, dass die Kinder in der gesamten Höhe oder Breite des Containers gestreckt werden.

Man kann verschiedene Werte für align-items verwenden, darunter flex-start, center und flex-end. Wenn du nun align-items auf stretch setzt, siehst du, dass alle Kind-Elemente den gesamten Raum des Containers ausfüllen. Um dies zu demonstrieren, entfernen wir eine feste Breite von den Kinder-Elementen, sodass sie den kompletten Platz einnehmen.

Nun nehmen wir an, du setzt align-items auf center. Plötzlich stellen wir fest, dass die Elemente nicht mehr den gesamten Platz einnehmen, sondern nur die minimale Breite behalten, die benötigt wird. Dies zeigt dir, wie wichtig der richtige Wert für align-items ist, um das gewünschte Layout zu erzielen.

Wenn du wieder eine feste Breite hinzufügst, beispielsweise 200px, siehst du, dass die Elemente breiter und das Layout stabil bleibt. Du kannst auch width: 100% verwenden, um eine ähnliche Wirkung zu erzielen.

Jetzt kommen wir zum Kern unserer Anleitung: dem Umgang mit align-self. Dieses CSS-Property erlaubt es dir, die Individuelle Ausrichtung jedes Kinder-Elements einzustellen, unabhängig von der Einstellung des übergeordneten Containers. Daher setzen wir align-items auf center und fügen dann spezifische Einstellungen für align-self hinzu.

Für das Navigations-Element möchtest du, dass es ganz links ausgerichtet ist. Setze align-self: flex-start für die Navigation und speichere deine Änderungen. Du solltest beobachten können, wie das Navigationselement ganz nach links wandert.

Für das Haupt-Element (main) setzen wir align-self: center. Es sollte weiterhin in der Mitte bleiben und dadurch wird der Abstand zu den anderen Elementen sichtbar.

Nun richten wir den Fußbereich (footer) mit align-self: flex-end nach unten aus. So ergeben alle Einstellungen eine diagonale Linie von links oben nach rechts unten in deinem Layout.

Wenn du nun align-self für das Haupt-Element auf stretch setzt, bedeutet dies, dass es den gesamten Platz in der Querachse einnehmen wird, was die anderen Elemente in ihrer Höhe collapse.

Ähnlich kannst du auch die Richtung ändern, indem du für deinen Container flex-direction: row setzt. Hierbei bleibt die Vorgehensweise für die Ausrichtung der einzelnen Elemente dasselbe, nur die Achse ändert sich. Oben fangen wir mit flex-start an und lassen die Elemente entsprechend nach dem Prinzip stretch ausrichten.

Ein wichtiger Punkt ist, dass du align-self so oft wie nötig verwenden kannst, um jedem Element eine individuelle Ausrichtung zu geben, wodurch du vollständige Kontrolle über das Layout des Containers und dessen Kinder behältst.

Wenn du die Flexbox-Eigenschaften gezielt anwendest, kannst du ein visuell ansprechendes Layout kreieren, das auch für unterschiedliche Bildschirmgrößen optimiert ist.

Zusammenfassung

In dieser Anleitung haben wir die Flexbox-Eigenschaften align-items und align-self eingehend behandelt. Du hast gelernt, wie du die Ausrichtung von Elementen in einem Flex-Container gestalten kannst, sowohl pauschal über den Container als auch individuell für jedes einzelne Element.