Umbrechen und Wachsen
Wir haben dem Abschnitt „Unsere Katzen“ zwei Dinge hinzugefügt. Unter der Überschrift steht eine Zeile mit Labels, die sagen, was alle unsere Katzen haben. Unter den Karten gibt es eine orange Box, in der sich Besucher per E-Mail für Neuigkeiten anmelden können. Beide Zeilen sind schon Flex-Container mit den Klassen flex gap-2. Scrolle in der Vorschau nach unten, um sie zu sehen.
Sieh dir die Labels an: In einer schmalen Vorschau passen sie nicht in eine Zeile, also schrumpfen sie, und ihr Text bricht in zwei Zeilen um. Wie du aus dem CSS-Kurs weißt, hält ein Flex-Container alle seine Items in einer Zeile. Diese Klassen bestimmen, was passiert, wenn die Items nicht passen oder wenn Platz übrig ist:
| Klasse | CSS | Was sie bewirkt |
|---|---|---|
flex-wrap | flex-wrap: wrap; | Die Items, die nicht passen, wandern in die nächste Zeile. |
flex-nowrap | flex-wrap: nowrap; | Alle Items bleiben in einer Zeile (der Standard). |
grow | flex-grow: 1; | Das Item wächst in den freien Platz hinein. |
flex-1 | flex: 1; | Das Item wächst von der Startgröße null aus, nimmt also den ganzen Platz, den die anderen Items übrig lassen. |
shrink-0 | flex-shrink: 0; | Das Item schrumpft nicht: Es behält seine Größe. |
Flex-Items schrumpfen standardmäßig (flex-shrink: 1), aber höchstens bis zur Breite ihres längsten Wortes. Genau das passiert bei unseren Labels. shrink-0 verbietet einem Item das Schrumpfen ganz. Das ist nützlich für Dinge, die ihre Größe behalten müssen, etwa ein kleines rundes Bild neben einem langen Text: Ohne shrink-0 würde es zu einem Oval gequetscht.
So schreibst du es:
Anweisungen
- 1
Füge der Liste der Labels (dem
ulunter der Überschrift „Unsere Katzen“) die Klasseflex-wraphinzu. Die Labels, die nicht passen, wandern in die nächste Zeile, und der Text jedes Labels bleibt in einer Zeile. (Passen alle fünf in deine Vorschau, bleiben sie in einer Zeile.) - 2
In der orangen Box ist das E-Mail-Feld nur so breit, wie Browser Felder standardmäßig machen. Füge dem Feld (
input) die Klasseflex-1hinzu: Es wächst und füllt die Zeile bis zum Button „Abonnieren“. - 3
Klicke in der Leiste Vorschaubreite über der Vorschau auf 375 px, die Breite eines Smartphones. Ein Formularfeld kann nicht schmaler werden als seine Standardbreite, also passt der Button nicht daneben und ragt aus der Box heraus. Füge auch dem Formular (
form) die Klasseflex-wraphinzu: Wenn der Platz nicht reicht, wandert der Button unter das Feld. Schalte die Vorschau danach mit dem Button Einpassen wieder zurück.