Abstände zwischen Items

Gehen wir zurück zu den Rassen-Karten. Sie stehen in einer Reihe, aber sie berühren sich. Wir könnten sie mit Außenabständen trennen, wie wir es bei den Links in der Navigationsleiste getan haben (jeder von ihnen hat margin-left: 1rem). Aber ein Außenabstand fügt auf einer Seite jedes Items Platz hinzu, wir bekämen also auch Platz vor dem ersten Item oder nach dem letzten, wo wir meist keinen wollen.

Ein Flex-Container hat dafür ein besseres Werkzeug: die Eigenschaft gap. Sie legt die Größe der Lücken zwischen den Items fest, und zwar nur zwischen ihnen, nie an den Rändern des Containers:

.container {
	display: flex;
	gap: 2rem;
}

Genau wie bei Außenabständen kannst du jede Einheit verwenden, die du kennst, zum Beispiel px oder rem.