Listengruppe mit Badges

Die Listenelemente sollten mit den Badges angezeigt werden. Das Badge sollte rechtsbündig und vertikal zentriert sein. Das Badge muss vertikal zentriert sein, unabhängig davon, ob es sich um eine einzelne Zeile Inhalt oder mehrere Textzeilen handelt.

Flexbox macht dieses spezielle Muster einfach und erleichtert auch Änderungen am Layout.

Um sicherzustellen, dass der Text und das Badge korrekt ausgerichtet sind, verwende ich die justify-content-Eigenschaft mit dem Wert space-between. Dies platziert zusätzlichen Raum zwischen den Elementen. Im Live-Beispiel, wenn Sie diese Eigenschaft entfernen, werden Sie sehen, dass sich das Badge an das Ende des Textes bei Elementen mit kürzerem Text als eine Zeile bewegt.

Um den Inhalt horizontal auszurichten, verwende ich die align-items-Eigenschaft, um den Text und das Badge auf der Querachse auszurichten. Wenn Sie möchten, dass das Badge am oberen Rand des Inhalts ausgerichtet ist, ändern Sie dies zu align-items: flex-start.

• Box-Ausrichtung in Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Modul CSS Flexible Box Layout