Beim Hinzufügen von Widgets und Designelementen in Flex können Sie zwischen Containern und Flexboxen wählen. Diese unterscheiden sich jedoch in einigen wesentlichen Aspekten. Im Folgenden finden Sie Informationen und Beispiele dazu, wann Sie einen Container und eine Flexbox verwenden und wann Sie Elemente direkt in das Raster einfügen können.
Als allgemeine Regel gilt: Wenn Sie ein automatisches Layout haben möchten, das die Anordnung der Elemente in einer horizontalen oder vertikalen Liste beinhaltet, verwenden Sie eine Flexbox. Wenn Sie ein freies Layout mit überlappenden Elementen erstellen möchten, verwenden Sie einen Container.
Raster
Das Raster ist die Basisebene, die die Zeilen und Spalten in Ihrem Abschnitt definiert, und diese enthalten Container und Flexboxen. Platzieren Sie Elemente direkt auf dem Raster, wenn Sie möchten, dass sich Elemente relativ zu einer Karte oder einem Layout überlappen. Das kann zum Beispiel beim Hinzufügen von Beschriftung mit „Im Angebot“, interessanten Titeln und so weiter der Fall sein.
Um ein wirklich responsives Design zu erstellen, empfehlen wir Ihnen, die Hilfslinien des Rasters zum Ausrichten und Einrasten von Elementen zu verwenden, anstatt Elemente frei im Raster zu platzieren. Sie können Elemente beim Ziehen und Ablegen in das Raster einrasten lassen oder die Ausrichtungsschaltflächen im Design-Bereich verwenden.
Container
Container eignen sich am besten für freie Layouts. Verwenden Sie Container, wenn Sie überlappende Objekte oder nicht-lineare Layouts erstellen möchten.
Flexbox
Verwenden Sie eine Flexbox, wenn Sie ein automatisches Layout erstellen möchten, das angeordnete Elemente in einer horizontalen oder vertikalen Liste enthält. Außerdem sollten Sie Elemente zu einer Flexbox hinzufügen, wenn Sie Elemente haben, die hintereinander platziert werden sollen (z. B. mehrere CTAs, Beschriftungen, Logos usw.).
