Skip to main content

​
Allgemeine Beschreibung

Mit dem Flex-Container-Portlet gestaltest du das Layout deiner Seite. Er dient als Rahmen für andere Elemente und hilft dir dabei, Inhalte präzise auszurichten, zu stapeln oder nebeneinander anzuordnen. Das Ganze funktioniert vollautomatisch für alle Displaygrößen (Desktop, Tablet, Smartphone).

​
Einsatzmöglichkeiten (Inspiration)

  • Aufbau von mehrspaltigen Inhalten
  • Layouts, die sich flexibel an verschiedene Bildschirmbreiten anpassen
  • Zentrieren von Logos, Texten oder Buttons
  • Steuerung der Abstände zwischen verschiedenen Elementen

​
Featureübersicht:

  • Inhalte flexibel horizontal oder vertikal ausrichten
  • Eigene Regeln für Handy, Tablet und Desktop festlegen
  • Einfaches System für Zwischenräume (Gap)
  • Einstellungen werden automatisch an größere Displays weitergegeben (Vererbung)

​
Settings:

​
Allgemein

In diesem Reiter nimmst du grundlegende Einstellungen vor, die bestimmen, wie sich der Container in sein direktes Umfeld einfügt.
Image

​
Inherit Height of parent element

Mit dieser Checkbox steuerst du die Höhenanpassung des Containers.
  • Aktiviert: Der Flex-Container übernimmt automatisch die volle Höhe des Elements, in dem er sich befindet. Das ist besonders nützlich, wenn du einheitliche Kachel-Layouts erstellen möchtest, bei denen alle Boxen in einer Reihe gleich hoch sein sollen.
  • Deaktiviert: Der Container ist nur so hoch, wie es sein eigener Inhalt erfordert.

​
Parent Container

In diesem Reiter legst du fest, wie sich der äußere Rahmen verhält. Image

​
Container als Elterncontainer nutzen

Damit die Flex-Eigenschaften auf die Inhalte wirken, muss hier “ja” ausgewählt sein.

​
Flex Type

Hier aktivierst du das Flex-Layout-System.
  • use flex: In der Regel auf “Use setting” stellen, um die darunterliegenden Optionen freizuschalten.
  • Main bis XL: Hier legst du fest, ob das Flex-System auf bestimmten Displaygrößen aktiv sein soll.
  • inherit: Übernimmt die Einstellung der kleineren Displaygröße.

​
Flex Direction (Ausrichtung)

Bestimme, in welche Richtung deine Inhalte fließen.
  • row: Deine Elemente werden nebeneinander (horizontal) angezeigt.
  • column: Deine Elemente werden untereinander (vertikal) gestapelt.

​
Align Items (Anordnung)

Steuert die Ausrichtung der Elemente innerhalb des Containers.
  • start: Inhalte werden am Anfang des Containers ausgerichtet.
  • center: Inhalte werden mittig platziert.
  • end: Inhalte werden am Ende des Containers ausgerichtet.

​
Gap (Abstände)

Mit der Gap-Funktion erzeugst du gleichmäßige Zwischenräume zwischen deinen Elementen.
  • use gap: Aktiviere diese Option mit “Use setting”, um Abstände zu definieren.
  • Werte (1, 2, 3…): Wähle die Stärke des Abstands. Höhere Zahlen bedeuten mehr Platz.
  • Main bis XL: Du kannst für jede Displaygröße einen eigenen Abstand wählen oder via inherit den Wert der kleineren Stufe übernehmen.

​
Child Container

In diesem Reiter stellst du ein, wie sich ein einzelnes Element innerhalb eines Flex-Containers verhält. Während der “Parent” den groben Rahmen vorgibt, bestimmst du hier die Details für das jeweilige Objekt. Image

​
Container als Kindcontainer nutzen

Damit die folgenden Einstellungen für dieses Element greifen, setze diese Option auf “ja”.

​
Align Self (Individuelle Ausrichtung)

Normalerweise folgen alle Elemente der Ausrichtung, die im Parent-Container eingestellt wurde. Mit “Align Self” kannst du für dieses eine Element eine Ausnahme machen.
  • auto: Nutzt die Standard-Einstellung des Eltern-Containers.
  • start / center / end: Richtet das Element oben, mittig oder unten aus – unabhängig von seinen Nachbarn.

​
Flex Fill & Grow (Platz einnehmen)

Diese Optionen steuern, wie das Element freien Raum im Container nutzt.
  • Flex Fill: Sorgt dafür, dass das Element den verfügbaren Platz in der Zeile komplett ausfüllt.
  • Flex Grow: Bestimmt, wie stark das Element im Verhältnis zu anderen wächst, wenn Platz übrig ist. Ein Wert von 0 bedeutet: Das Element behält seine ursprüngliche Größe.

​
Flex Shrink (Verkleinern)

Hier legst du fest, ob und wie stark das Element schrumpfen darf, wenn der Platz im Container knapp wird (z. B. auf kleinen Smartphone-Displays).

​
Margin Auto (Automatischer Außenabstand)

Dies ist ein praktischer Trick, um Elemente innerhalb einer Zeile wegzuschieben.
  • r auto (Right): Schiebt das Element nach links und hält alles andere auf Abstand nach rechts.
  • l auto (Left): Schiebt das Element ganz nach rechts.

​
Flex Wrap (Zeilenumbruch)

Bestimme hier, was passiert, wenn die Elemente breiter als der Container sind.
  • wrap: Die Elemente brechen automatisch in die nächste Zeile um.
  • nowrap: Alle Elemente werden in eine einzige Zeile gequetscht, auch wenn sie über den Rand hinausragen.

​
Order (Reihenfolge)

Ein sehr hilfreiches Feature für die mobile Ansicht. Du kannst die visuelle Reihenfolge der Elemente ändern, ohne ihren Platz im Code zu verschieben.
  • Beispiel: Du kannst ein Element, das am Desktop ganz rechts steht, auf dem Handy ganz oben anzeigen lassen, indem du ihm eine niedrigere Nummer (z. B. -1 oder 0) gibst.
Hinweis zur Vererbung: Auch hier kannst du für jede Displaygröße (Main bis XL) eigene Werte festlegen oder mit “inherit” dafür sorgen, dass die Einstellungen der kleineren Geräte übernommen werden.