Editor X: Über Stapel (Stacks)

Stapeln (Stacking) ist ein hilfreiches Werkzeug im Responsive Design, ohne welches sich über- und untereinander platzierte Elemente auf kleineren Bildschirmen überlagern können. Wenn du Elemente stapelst, werden sie in einem Flex-Container mit Rändern platziert, die du kontrollieren kannst.

Responsive Websites enthalten oft Elemente, deren Größe und Position sich je nach Bildschirmgröße ändern. Das kann dazu führen, dass sie sich überlagern oder sich der Abstand zwischen ihnen auf kleineren Viewports ändert.

Mithilfe der Stapel-Funktion legst du deine Elemente in einen Container, der sich automatisch an unterschiedliche Bildschirmgrößen anpasst, damit du ein responsives Layout erhältst.

Dies ist ein Beispiel dafür, was mit Elementen passiert, die NICHT gestapelt werden, wenn die Bildschirmgröße geändert wird:

Das Stapeln erstellt einen Flex-Container um deine Elemente herum, der dafür sorgt, dass sie immer im richtigen Abstand und in der richtigen Reihenfolge bleiben. Der Container ist standardmäßig transparent, du kannst ihn aber an deinen Stil anpassen, indem du die Füllfarbe, Ränder, Ecken und Schatten festlegst.

Elemente in einem Stapel werden durch vertikale Ränder getrennt. Um die Streifen zu sehen, die die aktuellen Ränder anzeigen, fahre mit der Maus über den Stapel oder wähle ihn aus. Doppelklicke auf Elemente innerhalb des Stapels und verschiebe sie, um den Abstand zwischen ihnen zu ändern.

Du kannst die Ränder auch dadurch in der Höhe anpassen, dass du im Inspektor-Panel neben Elementabstand einen Wert (px oder %) eingibst.