Skip to main content
Die Layout-Einstellungen steuern, wie Elemente innerhalb eines Containers angeordnet werden.
Hier entscheiden Sie, ob Elemente nebeneinander, gestapelt, zentriert, verteilt usw. dargestellt werden.
Layout

​
Die 4 wichtigsten Einstellungen

​
1. Direction (am wichtigsten)

Diese Einstellung steuert, wie Elemente im Container platziert werden.

​
Horizontal (Row)

  • Elemente verlaufen von links nach rechts
  • Beispiel: Schaltflächen nebeneinander
👉 Nutzen Sie das für:
  • Zeilen
  • Inline-Elemente
  • Spalten nebeneinander

​
Vertical (Column)

  • Elemente verlaufen von oben nach unten
  • Beispiel: Titel → Text → Schaltfläche
👉 Nutzen Sie das für:
  • Formulare
  • Gestapelte Inhalte
  • Die meisten Layouts (Standard)
Wenn sich etwas nicht korrekt ausrichten lässt, prüfen Sie zuerst Direction – das ist das häufigste Problem.

​
2. Distribution (Abstand zwischen Elementen)

Diese Einstellung steuert, wie Elemente über den Container verteilt werden. Häufige Optionen:
  • Start → Elemente sammeln sich am Anfang
  • Center → Elemente bleiben in der Mitte
  • End → Elemente rücken ans Ende
  • Space Between → erstes Element links, letztes rechts, Abstand dazwischen
  • Space Around → gleichmäßiger Abstand rund um die Elemente
👉 Beispiel: Bei drei Schaltflächen:
  • Space Between → über die volle Breite verteilt
  • Center → in der Mitte gruppiert

​
3. Align Items (Ausrichtung)

Diese Einstellung steuert die Ausrichtung auf der Gegenachse zu Direction.

​
Wenn Direction = Row (horizontal):

  • Align Items = vertikale Ausrichtung
    • Oben
    • Zentriert
    • Unten

​
Wenn Direction = Column (vertikal):

  • Align Items = horizontale Ausrichtung
    • Links
    • Zentriert
    • Rechts
Wichtig:
  • Direction = Hauptachse
  • Align Items = Querachse
(Hier entsteht die meiste Verwirrung)

​
4. Gap

  • Steuert den Abstand zwischen Elementen
  • Funktioniert wie eine automatische Abstandsregelung
👉 Beispiel:
  • Gap = 20 → erzeugt gleichmäßige Abstände zwischen allen Elementen

​
Einfache Beispiele

​
Beispiel 1: Alles zentrieren

  • Direction: Vertical
  • Align Items: Center
  • Distribution: Center
👉 Ergebnis: alles perfekt zentriert

​
Beispiel 2: Schaltflächen in einer Zeile

  • Direction: Horizontal
  • Distribution: Space Between
  • Align Items: Center
👉 Ergebnis: Schaltflächen horizontal verteilt

​
Beispiel 3: Einfaches Formularlayout

  • Direction: Vertical
  • Align Items: Left
  • Gap: 10–20
👉 Ergebnis: ein sauberes vertikales Formular

​
Häufige Fehler

❌ Elemente zentrieren wollen, ohne Direction zu ändern
❌ Align Items mit Distribution verwechseln
❌ Margin verwenden, statt Gap zu nutzen
❌ Vergessen, dass der Container die untergeordneten Elemente steuert

​
Bewährte Vorgehensweisen

  • Starten Sie bei den meisten Layouts mit Column
  • Nutzen Sie Row nur, wenn es nötig ist
  • Verwenden Sie Gap statt manueller Abstände
  • Halten Sie Layouts einfach und einheitlich
Goldene Regel:
Wenn etwas „falsch“ aussieht, liegt es fast immer an:
  • Der falschen Direction
  • Der falschen Ausrichtung