Containerverhalten festlegen

Wenn Sie das Verhalten des FlexBox-Containers konfigurieren möchten, erstellen Sie einen FlexBoxConfig-Block und geben Sie ihn mit dem Parameter config an.

FlexBox(
    config = {
        direction = FlexDirection.Column
        wrap = FlexWrap.Wrap
        alignItems = FlexAlignItems.Center
        alignContent = FlexAlignContent.SpaceAround
        justifyContent = FlexJustifyContent.Center
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

Mit FlexBoxConfig können Sie die Layoutrichtung, das Umbruchverhalten, die Ausrichtung und die Abstände zwischen Elementen definieren.

Layoutrichtung

Die Eigenschaft direction definiert die Hauptachse, die die Richtung bestimmt, in der Elemente angeordnet werden.

Row (Standard): Legt die Hauptachse horizontal fest. In Sprachen, die von links nach rechts geschrieben werden, ist die Reihenfolge von links nach rechts. In Sprachen, die von rechts nach links geschrieben werden, ist die Reihenfolge umgekehrt.
RowReverse: Kehrt die Richtung von Row um.
Column: Legt die Hauptachse auf vertikal (von oben nach unten) fest.
ColumnReverse: Kehrt die Richtung von Column um.

Elemente ausrichten und zusätzlichen Leerraum verteilen

In den folgenden Abschnitten wird beschrieben, wie Sie Elemente ausrichten und zusätzlichen Leerraum entlang der Haupt- und Querachse verteilen.

Entlang der Hauptachse

Verwenden Sie justifyContent, um Elemente entlang der Hauptachse zu verteilen. Die folgende Tabelle zeigt das Verhalten, wenn die Richtung Row ist.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

Entlang der Querachse

Verwenden Sie alignItems, um Elemente entlang der Querachse in einer einzelnen Zeile auszurichten. Dieses Verhalten kann für einzelne Elemente mit dem Modifikator alignSelf überschrieben werden.

Die folgenden Bilder zeigen das Verhalten, wenn die Richtung Row ist:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

Mit alignContent können Sie Zeilen an der Querachse ausrichten und zusätzlichen Leerraum zwischen den Zeilen verteilen. Diese Property gilt nur, wenn mehrere Zeilen vorhanden sind (Zeilenumbruch ist aktiviert). Die folgenden Bilder zeigen das Verhalten, wenn die Richtung Row ist:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

Elemente umbrechen

Durch Umbruch kann ein FlexBox-Container mehrzeilig werden. Elemente, die nicht passen, werden entlang der Querachse in eine neue Zeile oder Spalte verschoben. Konfigurieren Sie das Umbruchverhalten mit wrap.

`FlexWrap`-Wert	Beispiel mit der Richtung `Row`
`NoWrap` (Standard): Zeilenumbrüche werden verhindert. Elemente werden überlaufen, wenn die Hauptgröße nicht ausreicht.
`Wrap`: Wenn nicht genügend Platz für ein Element (plus Abstand) vorhanden ist, wird in Richtung der Querachse eine neue Zeile erstellt. Wenn die Richtung beispielsweise `Row` ist, wird eine neue Zeile darunter eingefügt.
`WrapReverse`: Wie `Wrap`, nur dass die neue Zeile in der entgegengesetzten Richtung zur Kreuzachse hinzugefügt wird. Wenn die Richtung beispielsweise `Row` ist, wird eine neue Zeile darüber eingefügt.

Das folgende Beispiel zeigt, wie der FlexBox-Umschließungsalgorithmus funktioniert. Der Container FlexBox hat eine Hauptgröße von 100dp, wobei wrap auf FlexWrap.Wrap und der Abstand auf 8dp festgelegt ist. Sie enthält drei Elemente mit basis 20dp, 40dp und 50dp.

In der Zeile sind 100dp Zeichen verfügbar. Kind 1 ist 20dp. Es ist Platz vorhanden, also wird Kind 1 in die Zeile eingefügt.

Das erste Element, das im Flexbox-Container platziert wird. — **Abbildung 1**: Das erste im `FlexBox`-Container platzierte Element.

In der Zeile sind 80dp Zeichen verfügbar. Die Lücke beträgt 8dp. Kind 2 ist 40dp. Der erforderliche Speicherplatz beträgt 48dp. Es ist Platz vorhanden, sodass die Lücke und Child 2 in die Zeile eingefügt werden.

In der Zeile sind 32dp Zeichen verfügbar. Die Lücke beträgt 8dp. Kind 3 ist 50dp. Der erforderliche Speicherplatz beträgt 58dp. In der aktuellen Zeile ist nicht genügend Platz, daher wird „Child 3“ in einer neuen Zeile platziert.

**Abbildung 3.** Das dritte Element wird in einer neuen Zeile platziert, da es nicht in die erste Zeile passt.

Lücken zwischen Elementen einfügen

Mit rowGap und columnGap können Sie Lücken zwischen Zeilen und Spalten einfügen. Das ist nützlich, um zu vermeiden, dass untergeordnete Elemente Abstandsmodifikatoren erhalten.