Ustawianie działania kontenera

Aby skonfigurować działanie kontenera FlexBox, utwórz blok FlexBoxConfig i podaj go za pomocą parametru config.

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

Użyj FlexBoxConfig, aby zdefiniować kierunek układu, zachowanie zawijania, wyrównanie i odstępy między elementami.

Kierunek układu

Funkcja direction ustawia oś główną, która określa kierunek rozmieszczenia elementów. Może mieć te wartości:

Row (domyślnie): ustawia główną oś jako poziomą. W przypadku języków pisanych od lewej do prawej będzie to od lewej do prawej, a w przypadku języków pisanych od prawej do lewej – od prawej do lewej.
RowReverse: odwraca kierunek Row.
Column: ustawia oś główną w pionie, od góry do dołu.
ColumnReverse: odwraca kierunek Column.

Wyrównywanie elementów i rozdzielanie dodatkowego miejsca

W kolejnych sekcjach opisujemy, jak wyrównywać elementy i rozdzielać dodatkowe miejsce wzdłuż osi głównej i osi poprzecznej.

Wzdłuż głównej osi

Użyj justifyContent, aby rozmieścić elementy wzdłuż głównej osi. W poniższej tabeli znajdziesz opis działania, gdy kierunek to Row.


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

wzdłuż osi poprzecznej,

Użyj alignItems, aby wyrównać elementy wzdłuż osi poprzecznej w jednym wierszu. To zachowanie można zastąpić w przypadku poszczególnych elementów za pomocą modyfikatora alignSelf.

Poniższe obrazy pokazują, jak to działa, gdy kierunek to Row:


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

Użyj alignContent, aby wyrównać wiersze do osi poprzecznej i rozmieścić dodatkowe miejsce między wierszami. Ta właściwość ma zastosowanie tylko wtedy, gdy jest wiele wierszy (zawijanie jest włączone). Poniższe obrazy pokazują działanie, gdy kierunek to Row:


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

Pakowanie produktów

Zawijanie umożliwia FlexBox kontenerowi rozciąganie się na wiele wierszy, przenosząc elementy, które się nie mieszczą, do nowego wiersza lub kolumny wzdłuż osi poprzecznej. Skonfiguruj działanie zawijania za pomocą wrap.

Wartość `FlexWrap`	Przykład z użyciem kierunku `Row`
`NoWrap` (domyślnie): uniemożliwia zawijanie elementów. Jeśli główny rozmiar jest niewystarczający, elementy przepełniają obszar.
`Wrap`: gdy nie ma wystarczająco dużo miejsca na element (plus odstęp), w kierunku osi poprzecznej tworzony jest nowy wiersz. Jeśli na przykład kierunek to `Row`, nowy wiersz zostanie dodany poniżej.
`WrapReverse`: tak samo jak `Wrap`, z tym że nowy wiersz jest dodawany w kierunku przeciwnym do osi poprzecznej. Jeśli na przykład kierunek to `Row`, nowy wiersz zostanie dodany powyżej.

Poniższy przykład pokazuje, jak działa algorytm zawijania FlexBox. Kontener FlexBox ma główny rozmiar 100dp, a właściwość wrap jest ustawiona na FlexWrap.Wrap, a odstęp wynosi 8dp. Zawiera 3 elementy z odpowiednio basis 20dp, 40dp i 50dp.

W wierszu jest 100dp wolnego miejsca. Dziecko 1 to 20dp. Jest miejsce, więc Dziecko 1 zostaje umieszczone w kolejce.

Pierwszy element umieszczony w kontenerze FlexBox. — **Rysunek 1.** Pierwszy element umieszczony w kontenerze `FlexBox`.

W wierszu jest 80dp wolnego miejsca. Różnica wynosi 8dp. Dziecko 2 to 40dp. Wymagane miejsce to 48dp. Jest miejsce, więc przerwa i Dziecko 2 są umieszczane w wierszu.

W wierszu jest 32dp wolnego miejsca. Różnica wynosi 8dp. Dziecko 3 to 50dp. Wymagane miejsce to 58dp. W bieżącej linii nie ma wystarczająco dużo miejsca, więc element Child 3 jest umieszczany w nowej linii.

**Rysunek 3.** Trzeci element umieszczony w nowym wierszu, ponieważ nie mieści się w pierwszym wierszu.

Dodawanie odstępów między elementami

Dodaj odstępy między wierszami i kolumnami, używając rowGap i columnGap. Jest to przydatne, aby uniknąć dodawania do elementów podrzędnych modyfikatorów odstępów.