Containerverhalten festlegen

Um das Verhalten des FlexBox-Containers zu konfigurieren, erstellen Sie einen FlexBoxConfig -Block und geben 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

Mit der Funktion direction wird die Hauptachse festgelegt, die die Richtung bestimmt, in der Elemente angeordnet werden. Folgende Werte sind möglich:

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

Elemente ausrichten und zusätzlichen Abstand verteilen

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

Entlang der Hauptachse

Verwenden Sie justifyContent, um Elemente entlang der Hauptachse zu verteilen. In der folgenden Tabelle wird das Verhalten beschrieben, wenn die Richtung Row ist.


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

Entlang der Nebenachse

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

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


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

Verwenden Sie alignContent, um Zeilen an der Nebenachse auszurichten und zusätzlichen Abstand zwischen Zeilen zu verteilen. Diese Eigenschaft gilt nur, wenn mehrere Zeilen vorhanden sind (Umbruch ist aktiviert). Die folgenden Bilder zeigen das Verhalten, wenn die Richtung Row ist:


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

Elemente zusammenfassen

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

`FlexWrap`-Wert	Beispiel mit Richtung `Row`
`NoWrap` (Standard): Verhindert, dass Elemente umgebrochen werden. 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 Nebenachse eine neue Zeile erstellt. Wenn die Richtung beispielsweise `Row` ist, wird eine neue Zeile unten hinzugefügt.
`WrapReverse`: Wie `Wrap`, aber die neue Zeile wird in der entgegengesetzten Richtung zur Nebenachse hinzugefügt. Wenn die Richtung beispielsweise `Row` ist, wird eine neue Zeile oben hinzugefügt.

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

In der Zeile ist 100dp Platz verfügbar. Das erste untergeordnete Element ist 20dp. Es ist Platz vorhanden, also wird das erste untergeordnete Element in der Zeile platziert.

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

In der Zeile ist 80dp Platz verfügbar. Der Abstand beträgt 8dp. Das zweite untergeordnete Element ist 40dp. Der erforderliche Platz beträgt 48dp. Es ist Platz vorhanden, also werden der Abstand und das zweite untergeordnete Element in der Zeile platziert.

In der Zeile ist 32dp Platz verfügbar. Der Abstand beträgt 8dp. Das dritte untergeordnete Element ist 50dp. Der erforderliche Platz beträgt 58dp. In der aktuellen Zeile ist nicht genügend Platz vorhanden, daher wird das dritte untergeordnete Element in einer neuen Zeile platziert.

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

Abstände zwischen Elementen hinzufügen

Fügen Sie mit rowGap und columnGap Abstände zwischen Zeilen und Spalten hinzu. So vermeiden Sie, dass Sie untergeordneten Elementen Abstandsmodifikatoren hinzufügen müssen.