Spacing

Grundlagen

Die Spacings und generell alle Größen in Flow basieren auf 8-Pixel-Schritten. Da jedoch oft kleinere Spacings als 8px benötigt werden, stehen zusätzlich feinere Abstufungen von 4px und 2px zur Verfügung. Standardmäßig folgen alle Components den definierten Spacings. Für ein optimales Spacing – das Einfluss auf das Layout hat – sollten die Components ColumnLayout und Section verwendet werden.

---

Best practices

Um mit dem Spacing ein harmonisches Layout zu erschaffen, achte auf folgende Punkte:

• Verwende die Layout-Components ColumnLayout und Section, um dadurch das richtige vertikale und horizontale Spacing zu erhalten.
• Spacing hilft bei der Gruppierung von Elementen auf Benutzeroberflächen. Je geringer das Spacing zwischen den Elementen ist, desto größer ist das Gefühl der Zusammengehörigkeit.
• Optisch kann es sinnvoll sein, das Spacing zwischen größeren Elementen größer und zwischen kleineren Elementen kleiner zu wählen.

---

Spacing-Tabelle

Alle Spacings in der Tabelle können sowohl vertikal und horizontal verwendet werden. Spacings werden in REM angegeben, wenn sie zwischen Elementen eingesetzt werden, die ebenfalls in REM definiert sind. Dies ist zum Beispiel bei Text der Fall, damit der Abstand beim Skalieren der Schriftgröße konsistent bleibt. Zwischen zwei Elementen muss jedoch nicht zwingend ein Spacing verwendet werden, da nicht immer ein Abstand erforderlich ist.