#flex-shrink
Legt fest, wie stark ein Flexbox-Element schrumpfen soll, wenn nicht genug Platz vorhanden ist.
default
flex-shrink: 1;
Wenn nicht genug Platz in der Hauptachse des Containers vorhanden ist, wird das Element um den Faktor 1 schrumpfen und seinen Inhalt umhüllen.
flex-shrink: 0;
Das Element wird nicht geschrumpft: es behält die Breite, die es braucht, und umschließt nicht seinen Inhalt. Seine Geschwister werden geschrumpft, um dem Zielelement Platz zu machen.
Da das Zielelement seinen Inhalt nicht umschließt, besteht die Möglichkeit, dass der Inhalt des Flexbox-Containers überläuft.
flex-shrink: 2;
Da der Flex-Shrink-Wert relativ ist, hängt sein Verhalten vom Wert des Flexbox-Elements Geschwister ab.
In diesem Beispiel möchte das grüne Element 100 % der Breite ausfüllen. Der benötigte Platz wird aus seinen beiden Geschwistern entnommen und in 4 geteilt:
- 3 Viertel werden dem roten Gegenstand entnommen
- 1 Viertel wird aus dem gelben Gegenstand entnommen
- „Beyond Earth“ – Mein Experiment mit ChatGPT: Kann die KI einen Science-Fiction Roman schreiben? - 22. Januar 2023
- Verzoegertes Laden von JavaScript-Code der document.write enthält - 24. Dezember 2022
- Tutorial: Schicke Buttons mit CSS3 erstellen - 24. Dezember 2022