Preiskarten
Jetzt die drei Preiskarten. Sie stehen nebeneinander in einer Reihe, 16px voneinander entfernt, und füllen zusammen die ganze Breite des Seiteninhalts. Jede Karte braucht mindestens 200px, daher passen auf einem schmalen Bildschirm nicht alle in eine Reihe. Dann bleiben so viele Karten in der Reihe, wie hineinpassen, die anderen rutschen in die nächste Reihe, 16px tiefer, und die Karten jeder Reihe wachsen so, dass sie die Reihe ausfüllen.
Die Beschreibungen in den Karten sind unterschiedlich lang, aber die Karten einer Reihe sind gleich hoch. Die Knöpfe Auswählen sitzen ganz unten in den Karten, sodass sie alle auf einer Höhe liegen.
Damit du siehst, wie die Karten umbrechen, mache dein Browserfenster schmaler (oder breiter, wenn sie schon umbrechen).
Nach dieser Übung sieht die Seite so aus (verkleinert):
Ein Tipp: Jede Karte ist ein Flex-Item, aber ihren eigenen Inhalt kannst du ebenfalls mit Flexbox anordnen, in einer Spalte. Und denk daran, welche Items den freien Platz bekommen.
So schreibst du es:
Anweisungen
- 1
Die Karten stehen nebeneinander, 16px voneinander entfernt, und füllen die Breite des Seiteninhalts. Jede Karte ist mindestens 200px breit: Die Karten, die nicht hineinpassen, rutschen in die nächste Reihe, 16px tiefer, und füllen auch diese aus.
- 2
Die Knöpfe Auswählen sitzen ganz unten in ihren Karten, alle auf einer Höhe.