FlexBox

FlexBox to kontener, który rozmieszcza elementy w jednym kierunku. Może zmieniać rozmiar, zawijać, wyrównywać i rozkładać przestrzeń między elementami, aby optymalnie wypełnić dostępne miejsce. Jest to przydatny układ w przypadku elementów o różnych rozmiarach i zmiany rozmiaru elementów, gdy zmienia się dostępna przestrzeń.

Dzięki FlexBox możesz:

• Kontrolowanie, jak elementy rosną i kurczą się, aby wypełnić dostępne miejsce
• zawijać elementy w nowych wierszach lub kolumnach, gdy nie ma dla nich wystarczająco dużo miejsca;
• Rozdzielanie dodatkowego miejsca między elementami za pomocą wygodnych ustawień wstępnych

Kiedy używać FlexBox

FlexBox jest zwykle używany do wyświetlania niewielkiej liczby elementów w ogólnym układzie ekranu. W przypadku ogólnego układu ekranu lepszym wyborem jest zwykle Grid. FlexBox nie obsługuje leniwego wczytywania elementów. Aby wyświetlać duże liczby elementów, używaj list i siatek ładowanych na żądanie. Jeśli chcesz zawijać elementy, użyj FlexBox zamiast FlowRow i FlowColumn.

Terminologia i pojęcia

FlexBox rozmieszcza elementy w poziomych lub pionowych liniach. Kierunek tych linii wyznacza oś główną. Oś poprzeczna jest prostopadła do osi głównej. Długość FlexBox wzdłuż głównej osi jest znana jako główny rozmiar. Odpowiednia długość osi poprzecznej jest nazywana rozmiarem poprzecznym. Te rozmiary i osie stanowią podstawę działania FlexBox.

Stosowanie właściwości

Właściwości FlexBox możesz zastosować na 2 sposoby:

• do kontenera FlexBox za pomocą FlexBox(config).
• do elementu w FlexBox za pomocą Modifier.flex;

Właściwości kontenera (config)

Właściwości elementu (Modifier.flex)

direction – kierunek układu elementu. wrap – czy zawijać elementy, jeśli główny rozmiar jest niewystarczający. justifyContent – jak rozmieszczać elementy wzdłuż głównej osi. alignItems – jak wyrównać elementy wzdłuż osi poprzecznej alignContent – jak rozdzielić dodatkową przestrzeń z rozmiaru poprzecznego, gdy jest wiele wierszy; rowGap / columnGap – dodaje odstęp między elementami i wierszami. Więcej informacji o tych właściwościach znajdziesz w artykule Ustawianie działania kontenera.

basis – rozmiar elementu przed rozprowadzeniem dodatkowego miejsca z głównego rozmiaru. grow – udział dodatkowej przestrzeni z głównego rozmiaru, który powinien otrzymać ten produkt. shrink – udział w deficycie miejsca w głównym rozmiarze, który powinien przypadać na ten produkt. alignSelf – sposób dystrybucji dodatkowego miejsca z rozmiaru reklamy pełnoekranowej do tego elementu, zastępuje alignItems order – określa kolejność układu. Więcej informacji o tych właściwościach znajdziesz w artykule Ustawianie działania elementu.

Informacje o algorytmie układu FlexBox

Jedną z najpotężniejszych funkcji FlexBox jest możliwość zmiany rozmiaru elementów podrzędnych, aby jak najlepiej dopasować je do dostępnej przestrzeni. Zrozumienie, jak to działa, może pomóc w ustawieniu właściwości FlexBox w celu optymalizacji interfejsu użytkownika pod kątem wszystkich możliwych rozmiarów.FlexBox

Algorytm układu FlexBox działa w ten sposób:

1. Obliczanie podstawowego rozmiaru elementu podrzędnego: użyj wartości basis elementu podrzędnego, aby obliczyć jego początkowy rozmiar wzdłuż osi głównej przed rozprowadzeniem dodatkowej przestrzeni.

2. Sort the children: Sort the children by their order values, if present.

3. Tworzenie wierszy: w przypadku każdego elementu podrzędnego sprawdź, czy jego rozmiar początkowy plus gap zmieści się w pozostałej przestrzeni w bieżącym wierszu. Jeśli tak, ustaw to dziecko w kolejce. Jeśli nie, umieść go w nowym wierszu, jeśli zawijanie jest włączone, lub umieść go w bieżącym wierszu, w którym będzie się przepełniać (będzie częściowo zasłonięty przez krawędź kontenera).

4. Wyrównywanie lub zmienianie rozmiaru elementów na osi głównej: w każdym wierszu rozdziel dodatkową przestrzeń między elementami lub zmień ich rozmiar albo wyrównaj je.

5. Wyrównywanie lub zmienianie rozmiaru elementów wzdłuż osi poprzecznej: w każdym wierszu rozmieść dodatkowe miejsce między elementami i wierszami, rozciągając lub wyrównując je.

Znasz już podstawowe pojęcia dotyczące FlexBox, więc zapoznaj się z artykułem Wprowadzenie, aby utworzyć podstawowy FlexBox.