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

Właściwość direction określa oś główną, która wyznacza kierunek rozmieszczenia elementów.

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 sekcjach poniżej znajdziesz informacje o tym, jak wyrównywać elementy i rozmieszczać 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 przedstawiono zachowanie, 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 odstępy 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 zajmowanie wielu 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 tworzona jest nowa linia. 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 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 miejsca. Różnica wynosi 8dp. Dziecko 2 to 40dp. Wymagana przestrzeń to 48dp. Jest miejsce, więc przerwa i Dziecko 2 są umieszczane w wierszu.

W wierszu jest 32dp miejsca. Różnica wynosi 8dp. Dziecko 3 to 50dp. Wymagana przestrzeń 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.