Begrenzt den Inhalt auf eine maximale Breite und zentriert ihn – verhindert, dass Text oder Karten auf großen Bildschirmen unleserlich breit werden.

Reiht Elemente sauber untereinander (VStack) oder nebeneinander (HStack) mit gleichmäßigem Abstand auf – erspart das manuelle Setzen von Flexbox-Klassen für den immer gleichen Anwendungsfall.

Ordnet Elemente in gleichmäßigen Spalten und Zeilen an – gut für Karten-Übersichten oder Dashboards, bei denen jedes Element gleich viel Platz bekommen soll.

Eine einfache Trennlinie zwischen zwei Abschnitten – mit optionalem Text in der Mitte, z.B. „oder“ zwischen zwei Login-Optionen.

Hält ein Element (z.B. ein Bild oder eingebettetes Video) immer im gleichen Breiten-Höhen-Verhältnis, egal wie breit der Container ist – verhindert springende Layouts beim Laden.

Flex ist die Basis für eigene Flexbox-Layouts, Center zentriert Inhalt in beide Richtungen mit einer Zeile, Spacer schiebt zwei Elemente an die gegenüberliegenden Ränder (z.B. Logo links, Buttons rechts in einer Navbar).

Sorgt dafür, dass alle Abschnitte einer Seite (Hero, Features, Pricing, ...) den gleichen vertikalen Abstand zueinander haben, ohne dass man diesen Abstand an jeder Stelle manuell nachbauen muss.

Der klassische Zweispalter (z.B. Text links, Bild rechts) – bricht auf schmalen Bildschirmen automatisch um, ohne dass du eigene Breakpoints schreiben musst.

Wie Grid, aber du gibst nur eine Mindestbreite pro Karte vor (z.B. 12rem) – wie viele Spalten daraus werden, entscheidet der verfügbare Platz automatisch, ganz ohne sm:/md:/lg:-Klassen.