FlexBox

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

Dzięki FlexBox możesz:

  • Kontrolowanie powiększania i zmniejszania elementów w celu wypełnienia dostępnego miejsca
  • Zawijaj elementy do nowych wierszy lub kolumn, gdy nie ma na nie wystarczająco dużo miejsca
  • Rozdzielaj dodatkowe miejsce między elementami za pomocą wygodnych gotowych ustawień

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 zwykle lepszym wyborem jest Grid. FlexBox nie obsługuje leniwego ładowania elementów. Aby wyświetlać dużą liczbę elementów, używaj list i siatek z opóźnionym ładowaniem. Jeśli musisz zawijać elementy, użyj FlexBox zamiast FlowRow i FlowColumn.

Terminologia i koncepcje

FlexBox rozmieszcza elementy w poziomych lub pionowych liniach. Kierunek tych linii określa oś główną. Oś pod kątem 90 stopni do osi głównej to oś poprzeczna. Długość FlexBox wzdłuż głównej osi jest nazywana rozmiarem głównym. Odpowiednia długość osi poprzecznej jest nazywana rozmiarem poprzecznym. Te rozmiary i osie stanowią podstawę działania czcionki FlexBox.

FlexBox z poziomą osią główną i pionową osią poprzeczną.
Rysunek 1. Osie i rozmiary, gdy kierunek FlexBox to Row.
FlexBox z pionową osią główną i poziomą osią poprzeczną.
Rysunek 2. Osie i rozmiary, gdy kierunek FlexBox to Column.

Zastosuj 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 aplikacji 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 względem osi poprzecznej.
  • alignContent – jak rozdzielić dodatkowe miejsce 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 zachowania kontenera.
  • basis – rozmiar elementu przed rozłożeniem dodatkowego miejsca z rozmiaru głównego.
  • grow – udział w dodatkowym miejscu z głównego rozmiaru, który powinien otrzymać ten element.
  • shrink – udział w deficycie miejsca w stosunku do głównego rozmiaru, który powinien otrzymać ten element.
  • alignSelf – jak rozdzielić dodatkowe miejsce z rozmiaru poprzecznego na ten element, 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 najważniejszych funkcji elementu FlexBox jest możliwość zmiany rozmiaru elementów podrzędnych, aby jak najlepiej dopasować je do dostępnego miejsca. Zrozumienie, jak FlexBox to robi, może pomóc Ci ustawić właściwości FlexBox, aby zoptymalizować interfejs pod kątem wszystkich możliwych rozmiarów.

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

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

  2. Sortowanie elementów podrzędnych: posortuj elementy podrzędne według ich wartości order, jeśli są obecne.

  3. Tworzenie wierszy: w przypadku każdego elementu podrzędnego sprawdź, czy jego początkowy rozmiar plus gap zmieści się w pozostałym miejscu w bieżącym wierszu. Jeśli tak, umieść 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 przepełniony (będzie częściowo zasłonięty przez krawędź kontenera).

  4. Wyrównywanie i zmienianie rozmiaru elementów na osi głównej: w każdym wierszu rozłóż dodatkowe miejsce na elementy lub między nimi, zmieniając ich rozmiar lub wyrównując je.

  5. Wyrównywanie i zmienianie rozmiaru elementów na osi poprzecznej: w każdym wierszu rozłóż dodatkowe miejsce na elementy i wiersze lub między nimi, rozciągając je lub wyrównując.

Znasz już pojęcia związane z FlexBox, więc zapoznaj się z artykułem Pierwsze kroki, aby utworzyć podstawowy FlexBox.

Wstecz
Ustawianie właściwości elementu
Dalej
Rozpocznij