Umbrechen der Items

Unsere Karten sind 12rem breit (siehe die Regel für .karte), aber in einer schmalen Vorschau werden sie gequetscht. Das liegt daran, dass ein Flex-Container alle seine Items in einer Zeile hält und sie verkleinert, wenn sie nicht hineinpassen, sogar unter ihre width. Und wenn sie nicht weiter schrumpfen können (ungefähr auf die Breite ihres längsten Wortes), ragen sie aus dem Container heraus.

Meist ist es besser, die Breite der Karten beizubehalten und die, die nicht hineinpassen, in die nächste Zeile zu verschieben, genau wie Wörter in einem Absatz. Das legt die Eigenschaft flex-wrap des Flex-Containers fest:

• nowrap: Alle Items bleiben in einer Zeile. Das ist der Standard.
• wrap: Die Items, die nicht hineinpassen, rutschen in die nächste Zeile.

Die mit gap festgelegte Lücke gilt auch zwischen den Zeilen. (Falls du einmal eine andere Lücke zwischen den Zeilen brauchst als zwischen den Items, gibt es die Eigenschaften row-gap und column-gap.)

Wie viele Karten in eine Zeile passen, hängt von der Breite der Vorschau ab. Wenn bei dir alle vier nebeneinander passen, mach dein Browserfenster schmaler und sieh zu, wie sie umbrechen.