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
• Zawijanie elementów do nowych wierszy lub kolumn, 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 rozmieścić elementy wzdłuż głównej osi. alignItems – jak wyrównać elementy wzdłuż osi poprzecznej alignContent – jak rozdzielić dodatkową przestrzeń z rozmiaru krzyżowego, 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 wynikającym z głównego rozmiaru, który powinien przypadać na ten produkt. alignSelf – sposób rozdysponowania dodatkowego miejsca z rozmiaru poprzecznego na ten produkt, 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.

Algorytm 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 plusgap zmieści się w pozostałym miejscu 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, gdzie będzie się przepełniać (będzie częściowo zasłonięty przez krawędź kontenera).

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

5. Wyrównaj lub zmień rozmiar elementów na osi poprzecznej: w przypadku każdej linii rozmieść dodatkowe miejsce między elementami i liniami lub w nich, 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.