Rozrastanie, kurczenie i baza flex

Domyślnie rozmiar elementów potomnych flex jest dopasowywany do ich zawartości. Flexbox udostępnia jednak trzy właściwości, które zapewniają precyzyjną kontrolę nad tym, jak elementy potomne wypełniają dostępną przestrzeń: flex-grow określa, ile dodatkowego miejsca zajmuje element, flex-shrink określa, jak bardzo element kurczy się, gdy brakuje miejsca, a flex-basis ustawia rozmiar początkowy przed powiększaniem lub pomniejszaniem. Tailwind udostępnia wszystkie trzy właściwości za pomocą zwięzłych klas narzędziowych.

flex-1 to najczęściej używane narzędzie do określania rozmiaru elementów flex. Stosuje ono flex: 1 1 0% — element rośnie, aby wypełnić dostępną przestrzeń, kurczy się w razie potrzeby i zaczyna od zerowej wartości bazowej. W praktyce flex-1 sprawia, że każdy element zajmuje równą część pozostałej przestrzeni kontenera. Dwa elementy rodzeństwa z flex-1 zajmują po 50%, a trzy — po 33%.

flex-auto stosuje flex: 1 1 auto — element rośnie i kurczy się, ale zaczyna od swojego naturalnego rozmiaru wynikającego z zawartości. W przeciwieństwie do flex-1, które zaczyna od zera, flex-auto zachowuje różnice rozmiarów między elementami przed proporcjonalnym rozdzieleniem dodatkowej przestrzeni. Należy go używać, gdy potrzebny jest podział uwzględniający zawartość zamiast równych części.

flex-initial stosuje flex: 0 1 auto — ustawienie domyślne przeglądarki. Elementy nie powiększają się poza rozmiar swojej zawartości (grow: 0), ale kurczą się, gdy brakuje miejsca (shrink: 1). Używa się tego narzędzia, aby jawnie określić ustawienie domyślne w sytuacji, gdy elementy rodzeństwa korzystają z flex-1. Dzięki temu pierwszy element zachowuje rozmiar dopasowany do zawartości, a elementy rodzeństwa zajmują pozostałą przestrzeń.

flex-none stosuje flex: none — element ani nie powiększa się, aby wypełnić dodatkową przestrzeń, ani nie kurczy się, gdy przestrzeń jest ograniczona. Zawsze zachowuje dokładnie swój naturalny rozmiar wynikający z zawartości. Należy używać flex-none w przypadku ikon, awatarów, odznak i elementów o stałej szerokości, które powinny zachować swój rozmiar niezależnie od ilości miejsca dostępnego w kontenerze flex.

W celu uzyskania precyzyjniejszej kontroli Tailwind udostępnia osobne narzędzia grow, grow-0, shrink i shrink-0. grow pozwala elementowi rosnąć (flex-grow: 1). grow-0 uniemożliwia powiększanie. shrink pozwala elementowi się kurczyć (flex-shrink: 1). shrink-0 uniemożliwia kurczenie — jest przydatne, gdy obrazy i ikony nie powinny być ściskane, gdy kontener jest zbyt wąski.

basis-* ustawia rozmiar początkowy elementu flex przed jego powiększaniem lub pomniejszaniem. Odpowiada właściwości CSS flex-basis. Można używać wartości odstępów Tailwind (basis-4 = 16px), wartości procentowych (basis-1/2 = 50%) lub wartości słownikowych (basis-full = 100%). Ustawienie basis-1/3 na trzech elementach rodzeństwa z grow tworzy układ trzech kolumn, który zaczyna się od równych części i wypełnia dostępną przestrzeń.

basis-0 i basis-auto dają nieco różne rezultaty w połączeniu z grow. Przy basis-0 wszystkie elementy zaczynają od szerokości zero i rosną wyłącznie zgodnie ze swoimi proporcjami flex-grow — co prowadzi do równego podziału przestrzeni. Przy basis-auto elementy najpierw zajmują szerokość wynikającą z zawartości, a następnie dodatkowa przestrzeń jest rozdzielana — co prowadzi do podziału proporcjonalnego do zawartości.

Klasyczny układ dwóch paneli wykorzystuje flex-none w-64 na pasku bocznym (stała szerokość 256px) oraz flex-1 na obszarze głównej treści (zajmuje całą pozostałą przestrzeń). Tworzy to pasek boczny, który nigdy nie rośnie ani się nie kurczy, oraz obszar treści wypełniający 100% pozostałej przestrzeni. Jest to podstawa układów paneli i interfejsów administracyjnych.

Połączenie flex flex-wrap z flex-1 i ograniczeniem min-w-* tworzy responsywną siatkę, która automatycznie dostosowuje liczbę kolumn do dostępnej szerokości. Każda karta zajmuje co najmniej szerokość min-w-64, a następnie powiększa się, aby wypełnić wiersz dzięki flex-1. Gdy karta nie może się zmieścić, przechodzi do następnego wiersza — bez potrzeby jawnego zarządzania punktami przerwania.

Narzędzia Tailwind order-* zmieniają wizualną kolejność wyświetlania elementów flex bez zmiany ich kolejności w DOM. order-first przenosi element na początek, order-last przenosi go na koniec, a wartości od order-1 do order-12 zapewniają szczegółową kontrolę. Jest to przydatne przy responsywnej zmianie kolejności: pasek boczny wyświetlany po treści na urządzeniach mobilnych można wizualnie przenieść przed nią na komputerach za pomocą md:order-first.

W tej lekcji nauczyli się Państwo, że: flex-1 sprawia, że elementy potomne zajmują równe części dostępnej przestrzeni, flex-none uniemożliwia powiększanie i pomniejszanie elementu, dzięki czemu zachowuje on swój naturalny rozmiar, a grow, shrink i basis-* zapewniają szczegółową kontrolę nad każdym z tych wymiarów osobno. Następnie zajmiemy się przepełnieniem za pomocą flex-wrap i tworzeniem stałych odstępów między elementami flex.