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 określić kierunek układu, sposób zawijania, wyrównanie i odstępy między elementami.

Kierunek układu

Funkcja direction ustawia oś główną, która określa kierunek układu elementów. Akceptuje ona te wartości:

Row (domyślnie): ustawia oś główną jako poziomą. W przypadku języków pisanych od lewej do prawej będzie to kierunek od lewej do prawej, a w przypadku języków pisanych od prawej do lewej – odwrotnie.
RowReverse: odwraca kierunek Row.
Column: ustawia oś główną jako pionową, 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 poprzecznej.

Wzdłuż osi głównej

Użyj justifyContent, aby rozdzielić elementy wzdłuż osi głównej. W tabeli poniżej przedstawiamy działanie, 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 działanie można zastąpić w przypadku poszczególnych elementów za pomocą alignSelf modyfikatora.

Na ilustracjach poniżej przedstawiamy działanie, gdy kierunek to Row:


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

Użyj alignContent, aby wyrównać wiersze do osi poprzecznej i rozdzielić dodatkowe miejsce między wierszami. Ta właściwość ma zastosowanie tylko wtedy, gdy jest wiele wierszy (zawijanie jest włączone). Na ilustracjach poniżej przedstawiamy działanie, gdy kierunek to Row:


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

Pakowanie elementów

Zawijanie umożliwia kontenerowi FlexBox wyświetlanie elementów w wielu wierszach, przenosząc elementy, które się nie mieszczą, do nowego wiersza lub kolumny wzdłuż osi poprzecznej. Skonfiguruj sposób zawijania za pomocą wrap.

Wartość `FlexWrap`	Przykład z kierunkiem `Row`
`NoWrap` (domyślnie): uniemożliwia zawijanie elementów. Jeśli rozmiar główny jest niewystarczający, elementy będą się nakładać.
`Wrap`: gdy nie ma wystarczająco dużo miejsca na element (plus odstęp), tworzony jest nowy wiersz w kierunku osi poprzecznej. Jeśli na przykład kierunek to `Row`, nowy wiersz zostanie dodany poniżej.
`WrapReverse`: działa 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.

W przykładzie poniżej pokazujemy, jak działa algorytm zawijania FlexBox. Kontener FlexBox ma rozmiar główny 100dp, a wrap jest ustawiony na FlexWrap.Wrap i ma odstęp 8dp. Zawiera 3 elementy z wartościami basis odpowiednio 20dp, 40dp i 50dp.

W wierszu jest dostępne miejsce o rozmiarze 100dp. Element podrzędny 1 ma rozmiar 20dp. Jest miejsce, więc element podrzędny 1 jest umieszczany w wierszu.

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

W wierszu jest dostępne miejsce o rozmiarze 80dp. Odstęp wynosi 8dp. Element podrzędny 2 ma rozmiar 40dp. Wymagane miejsce to 48dp. Jest miejsce, więc odstęp i element podrzędny 2 są umieszczane w wierszu.

W wierszu jest dostępne miejsce o rozmiarze 32dp. Odstęp wynosi 8dp. Element podrzędny 3 ma rozmiar 50dp. Wymagane miejsce to 58dp. W bieżącym wierszu nie ma wystarczająco dużo miejsca, więc element podrzędny 3 jest umieszczany w nowym wierszu.

**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 za pomocą rowGap i columnGap. Jest to przydatne, aby uniknąć dodawania modyfikatorów odstępów do elementów podrzędnych.