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ępną przestrzeń. 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ń

Kiedy używać FlexBox

FlexBox jest zwykle używany do wyświetlania niewielkiej liczby elementów w 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 zawinąć 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 stosować 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ż osi głównej. 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 poprzecznego do tego produktu, zastępuje alignItems order – określa kolejność układu. Więcej informacji o tych właściwościach znajdziesz w artykule Ustawianie zachowania 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 FlexBox to działa, pomoże Ci ustawić właściwości FlexBox, aby zoptymalizować interfejs użytkownika pod kątem wszystkich możliwych rozmiarów.

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. Sortowanie elementów podrzędnych: sortuj elementy podrzędne według ich wartości order, jeśli są dostępne.

3. Tworzenie wierszy: w przypadku każdego elementu podrzędnego sprawdź, czy jego początkowy rozmiar 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 lub zmienianie rozmiaru elementów na osi głównej: w każdym wierszu rozdziel dodatkowe miejsce 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 rozdziel dodatkową przestrzeń między elementami i wierszami, rozciągając lub wyrównując je.

Teraz, gdy znasz już podstawowe pojęcia dotyczące FlexBox, zapoznaj się z artykułem Wprowadzenie, aby utworzyć podstawowy FlexBox.