FlexLayout

Container zum automatischen Positionieren von Steuerelementen.

Symbol
Menüband	Start > Steuerelemente > Container > Layout > FlexLayout

Das Steuerelement "FlexLayout" ist ein Container zum automatischen Positionieren der darin enthaltenen Elemente. Das FlexLayout wird auf einem übergeordneten Container, z. B. auf einer Page, im Designer platziert.

Das FlexLayout unterstützt folgende Funktionalität:

Automatische Positionierung der enthaltenen Elemente
Anbindung an die Benutzerverwaltung zur Sperrung der Bedienbarkeit
Darstellung des Hintergrunds, des Rahmens, des Schattens etc.
Farbliche Darstellung des Hintergrunds und des Rahmens

Diese Funktionalitäten können Sie über die Eigenschaften im Fenster Eigenschaften konfigurieren, wenn Sie das Steuerelement im Designer oder in der Dokumentgliederung markieren.

Für den Layout-Container stehen keine System-Styles zur Verfügung. Sie können eigene Styles für das Steuerelement erstellen. Diese Styles stehen nach der Erstellung in der Eigenschaft "Style" zur Auswahl.

Wird ein FlexLayout auf einer Page platziert, so hat es zunächst keine weiteren Elemente. Steuerelemente, die auf dem FlexLayout platziert werden, werden als Unterelemente zum FlexLayout hinzugefügt.

Das FlexLayout kann beliebige Steuerelemente aufnehmen.

Das FlexLayout ordnet die auf ihm platzierten Elemente automatisch zeilenweise oder spaltenweise an. Wird die Größe des FlexLayouts verändert, so können die Steuerelemente in die nächste Zeile oder Spalte springen. Die Elemente können zudem innerhalb der Zeilen oder Spalten ausgerichtet werden.

Wird ein Steuerelement auf dem FlexLayout platziert, dann stehen in der Kategorie "Layout" die Eigenschaften "FlexGrow" und "FlexShrink" zur Verfügung, die es dem Steuerelement erlauben nach Bedarf zu schrumpfen oder sich zu vergrößern.

Zur automatischen Positionierung von enthaltenen Elementen stehen im FlexLayout folgende Eigenschaften bereit:

Orientation

Legt fest, ob die enthaltenen Elemente zeilenweise (Horizontal) oder spaltenweise (Vertical) angeordnet werden.

Orientation=Horizontal und Orientation=Vertical

Wrap

Legt fest, dass überschüssige Elemente automatisch in die nächste Zeile bzw. Spalte springen, wenn sie mehr Platz benötigen als der Container breit bzw. hoch ist. Ist Wrap = true, dann ist die jeweilige Zeile ist so hoch wie das höchste Element in der Zeile und die jeweilige Spalte ist so breit wie das jeweils breiteste Element in der Spalte.

Ob der überschüssige Inhalt sichtbar ist oder abgeschnitten wird (wie bei Element 3 in der ersten der beiden Abbildungen), legt die Eigenschaft "Overflow" fest.

Wrap = False und Wrap = True

AlignItems

Legt die Ausrichtung der Elemente senkrecht zur Einstellung der Eigenschaft "Orientation" fest. Gibt es mehrere Zeilen/Spalten mit den Elementen im FlexLayout (Wrap = true), dann legt "AlignItems" die Ausrichtung der Elemente innerhalb jeder Zeile/Spalte senkrecht zur Einstellung "Orientation" fest.

Start

Richtet die Elemente an der oberen Kante des Containers/der jeweiligen Zeile bzw. an der linken Kante des Containers/der jeweiligen Spalte aus.

Orientation = Horizontal, Wrap = False, AlignItems = Start
End

Richtet die Elemente an der unteren Kante des Containers/der jeweiligen Zeile bzw. an der rechten Kante des Containers/der jeweiligen Spalte aus.

Orientation = Horizontal, Wrap = False, AlignItems = End
Center

Platziert die Elemente in der Mitte des Containers bzw. der jeweiligen Zeile/Spalte.

Orientation = Horizontal, Wrap = False, AlignItems = Center
Baseline

Richtet die Elemente an der Basislinie (Grundlinie, Schriftlinie) ihrer Texte aus.

Orientation = Horizontal, Wrap = False, AlignItems = Baseline
Stretch

Die Elemente werden so gestreckt, dass sie den gesamten Container bzw. die gesamte Zeilenhöhe/Spaltenbreite einnehmen.
- Die Einstellung "Stretch" wirkt sich nur auf Elemente aus, deren Eigenschaft "Height" bzw. "Width" auf "auto" gesetzt ist. In der Abbildung unten ist das bei Element 3 der Fall.
Orientation = Horizontal, Wrap = False, AlignItems = Stretch

AlignContent

Gibt es mehr als eine Zeile/Spalte mit den Elementen im Container, dann legt diese Eigenschaft die Position der Zeilen/Spalten fest. Die Eigenschaft wirkt senkrecht zur Einstellung der Eigenschaft "Orientation".

Start

Platziert die Zeilen mit den Elementen oben im Container bzw. die Spalten links im Container.

Orientation = Horizontal, Wrap = True, AlignContent = Start
End

Platziert die Zeilen mit den Elementen unten im Container bzw. die Spalten rechts im Container.

Orientation = Horizontal, Wrap = True, AlignContent = End
Center

Platziert die Zeilen/Spalten mit den Elementen in der Mitte des Containers.

Orientation = Horizontal, Wrap = True, AlignContent = Center
Stretch

Streckt die Zeilen bzw. Spalten in der Weise, dass der überschüssige Raum im Container gleichmäßig auf die Zeilen bzw. Spalten verteilt wird.
- Beispiel: Der Container in der Abbildung unten ist 260 px hoch. Eine Zeile ist standardmäßig mindestens so hoch wie das höchste Element dieser Zeile. Die erste Zeile ist mindestens 100 px hoch, die zweite mindestens 26 px. Die minimalen Höhen der zwei Zeilen ergeben zusammen 100 px + 26 px = 126 px. Die überschüssige Höhe im Container beträgt 260 px - 126 px = 134 px. Da es zwei Zeilen gibt, wird die überschüssige Höhe durch zwei geteilt, jede Zeile wird um 134 px / 2 = 67 px gestreckt. Die Höhe der ersten Zeile beträgt somit 100 px + 67 px = 167 px, die Höhe der zweiten Zeile 26 px + 67 px = 93 px.
Space-between

Verteilt den im Container verfügbaren Raum gleichmäßig zwischen den Zeilen/Spalten.

Orientation = Horizontal, Wrap = True, AlignContent = Space-between
Space-around

Verteilt den im Container verfügbaren Raum gleichmäßig um die Zeilen/Spalten herum.

Orientation = Horizontal, Wrap = True, AlignContent = Space-around

JustifyContent

Legt die Ausrichtung der Elemente innerhalb der Zeile(n)/Spalte(n) fest. Die Eigenschaft wirkt in Richtung der Einstellung der Eigenschaft Orientation.

Start

Platziert die Elemente linksbündig in der jeweiligen Zeile oder oben in der jeweiligen Spalte.

Orientation = Horizontal, Wrap = True, JustifyContent = Start
End

Platziert die Elemente rechtsbündig in der jeweiligen Zeile oder unten in der jeweiligen Spalte.

Orientation = Horizontal, Wrap = True, JustifyContent = End
Center

Platziert die Elemente in der Mitte der jeweiligen Zeile/Spalte.

Orientation = Horizontal, Wrap = True, JustifyContent = Center
Space-between

Verteilt den in der Zeile/Spalte verfügbaren Raum gleichmäßig zwischen den Elementen.

Orientation = Horizontal, Wrap = True, JustifyContent = Space-between
Space-around

Verteilt den in der Zeile/Spalte verfügbaren Raum gleichmäßig um die Elemente herum.

Orientation = Horizontal, Wrap = True, JustifyContent = Space-around
Space-evenly

Verteilt den in der Zeile/Spalte verfügbaren Raum gleichmäßig zwischen einem Element und dem Container-Rand/dem nächsten Element.

Orientation = Horizontal, Wrap = True, JustifyContent = Space-evenly

Im FlexLayout kann ein vertikaler Abstand (Row Gap) und ein horizontaler Abstand (Column Gap) zwischen allen untergeordneten Steuerelementen festgelegt werden.

Row Gap

Legt den vertikalen Abstand (in y-Richtung) zwischen den Zeilen (bei Orientation=Horizontal) oder zwischen Elementen innerhalb einer Spalte (bei Orientation=Vertical) fest
Column Gap

Legt den horizontalen Abstand (in x-Richtung) zwischen den Elementen innerhalb einer Zeile (bei Orientation=Horizontal) oder zwischen den Spalten (bei Orientation=Vertical) fest.

Mehrere Spalten oder Zeilen können nur entstehen, wenn es mehr Elemente gibt, als in eine Spalte (bei Orientation=Vertical) oder Zeile (bei Orientation=Horizontal) passen und wenn die Eigenschaft Wrap aktiviert ist.

Orientation=Vertical, Wrap=true, Row Gap, Column Gap

Orientation=Horizontal, Wrap=true, Row Gap, Column Gap

Der sichtbare Leerraum zwischen den Steuerelementen im FlexLayout kann von den in Gap angegebenen Abständen abweichen, da die Eigenschaften AlignItems, JustifyContent, AlignContent sowie Margin und Padding ebenfalls für die Berechnung des sichtbaren Leerraums berücksichtigt werden.

Beispiel: Ein FlexLayout ordnet seine untergeordneten Steuerelemente spaltenweise an (Orientation=Vertical). Für die Steuerelemente sind alle Margins auf 8px festgelegt. Über die Eigenschaft Row Gap im FlexLayout wurde ein horizontaler Abstand von 12px angegeben. Der Abstand zwischen Steuerelement 1 und Steuerelement 2 zum Beispiel ergibt sich aus Margin Bottom von Steuerelement 1, Margin Top von Steuerelement 2 und Column Gap und beträgt somit 8px+8px+12px=28px.

Orientation=Vertical, Wrap=true, Row Gap, Column Gap, Margin

Addition von Gap und Margins

Verwandte Themen: