Flexbox: Verkleinerung in Flex-Richtung mit flex-shrink steuern

In diesem Tutorial beschäftigen wir uns mit dem CSS-Eigenschaftsmodifikator flex-shrink. Diese Option ist Teil des Flexbox-Modells, das dir erlaubt, flexible Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen. Während wir im letzten Video flex-grow behandelt haben, welches regelt, wie Elemente im Flex-Container wachsen können, geht es dieses Mal um die Schrumfung von Elementen, wenn der Platz im Container geringer ist als die vorgegebene flex-basis. In diesem Beitrag lernst du, wie du mit flex-shrink die Verkleinerung von Flexbox-Elementen gezielt einschränken oder anpassen kannst.

Wichtigste Erkenntnisse

• flex-shrink bestimmt, wie viel ein Element schrumpfen kann, wenn nicht genug Platz vorhanden ist.
• Der Standardwert für flex-shrink ist 1, was bedeutet, dass ein Element Platz einnehmen kann, je nachdem, wie viel Platz verfügbar ist und andere Elemente im Container definiert sind.
• Man kann flex-shrink nutzen, um ein bestimmtes Verhältnis für die Schrumpfung zwischen mehreren Elementen festzulegen.

Schritt-für-Schritt-Anleitung

Im Folgenden werde ich dir die Schritte erklären, um flex-shrink optimal zu nutzen. Ich werde jeden Schritt mit Screenshot-Variablen versehen, die du später durch die jeweiligen Screenshots aus dem Video ersetzen kannst.

Zuerst siehst du eine grundlegende Flexbox-Anwendung in CSS. Du hast drei Elemente, die eine flex-basis von 100 Pixel haben. Wenn genügend Platz im Flex-Container vorhanden ist, bleibt alles wie geplant.

Nun verringern wir die Höhe des Containers auf 200 Pixel. In diesem Fall ist der Platz, der benötigt wird, größer als die Höhe des Containers. Die Elemente haben noch immer eine flex-basis von 100 Pixel und können somit nicht schrumpfen, weil wir flex-shrink auf 0 gesetzt haben.

Um den Schrumpfungsmechanismus zu aktivieren, änderst du den Wert von flex-shrink. Setze es für das Element nav auf 1. Damit informierst du CSS, dass das Element nav maximal schrumpfen soll.

Jetzt speichere deine Änderungen, und du wirst sehen, dass das nav-Element proportionell geschrumpft wird, und zwar bis auf die minimale Höhe, die durch den Inhalt vorgegeben wird.

Wenn du möchtest, dass alle Elemente gleichmäßig schrumpfen, setze flex-shrink für alle Elemente auf 1. Wenn der Container nun kleiner wird als der benötigte Platz, schrumpfen alle Elemente entsprechend.

Um nun zusammenfassend zu zeigen, wie sich die verschiedenen flex-shrink Werte auf das Layout auswirken, wähle ein Verhältnis wie 1:1:2. In diesem Fall erhält das Hauptbereich (main) den größten Schrumpfungsanteil, während die anderen Elemente jeweils die kleineren Anteile erhalten.

Das bedeutet, dass das main-Element bei Platzmangel mehr Raum in Anspruch nehmen oder weniger Platz benötigen wird als die beiden anderen Elemente. Wenn du jedoch eine erdrückte Layout-Anpassung möchtest, kannst du auch flex-shrink für alle Elemente auf den gleichen Wert setzen.

Abschließend kannst du die Werte für flex-grow, flex-shrink und flex-basis allesamt kombinieren, was dir mehr Flexibilität bei der Layout-Gestaltung in CSS ermöglicht. Achte darauf, dass du sie stets den Anforderungen deines Designs anpasst.

Zusammenfassung

In diesem Tutorial hast du gelernt, wie du flex-shrink in CSS verwendest, um die Größenveränderung von Flexbox-Elementen zu steuern. Du hast verschiedene Möglichkeiten kennengelernt, die Schrumpfung zu definieren und wie sich diese auf das Layout auswirken.