Ograniczenia minimalne i maksymalne

Stałe szerokości i wysokości zawodzą przy skrajnych rozmiarach obszaru widoku — przy zbyt małej szerokości zawartość zostaje ściśnięta, a przy zbyt dużej tekst staje się nieczytelny. Właściwości CSS min/max rozwiązują ten problem, wyznaczając bezpieczne granice: element może zachować elastyczność w określonym zakresie, ale nigdy nie przekroczy ustalonych limitów. Narzędzia Tailwind min-w-*, max-w-*, min-h-* i max-h-* wyznaczają te granice za pomocą prostych nazw klas.

min-w-* uniemożliwia zmniejszenie szerokości elementu poniżej określonej wartości. Tailwind udostępnia min-w-0 (bardzo często używane w kontekście flex), min-w-full, min-w-min, min-w-max i min-w-fit. Najważniejsze jest min-w-0, które pozwala elementom podrzędnym flex lub grid zmniejszyć się poniżej ich naturalnej szerokości zawartości — rozwiązuje to wiele problemów z przepełnieniem układu.

max-w-* ogranicza maksymalną szerokość, do której może rozrosnąć się element. Tailwind udostępnia nazwane rozmiary od max-w-xs (320 px) do max-w-7xl (1280 px), a także max-w-full, max-w-prose i max-w-screen-*. Połączenie max-w-7xl mx-auto to standardowy wzorzec wyśrodkowywania zawartości strony, który zapobiega jej nadmiernemu rozciąganiu na dużych monitorach.

max-w-prose ustawia max-width: 65ch — około 65 znaków w wierszu, czyli popartą badaniami optymalną długość zapewniającą komfort czytania. Stosuj tę klasę do tekstu artykułów, wpisów blogowych i innych dłuższych treści, aby zapobiec nadmiernemu rozciąganiu wierszy na dużych ekranach. Jednostka ch skaluje się wraz z rozmiarem czcionki, dzięki czemu długość wiersza pozostaje wygodna nawet po zmianie czcionki.

Nazwane rozmiary max-w-* w Tailwind tworzą logiczną progresję odpowiadającą typowym szerokościom komponentów interfejsu. max-w-xs (320 px) nadaje się do podpowiedzi i kart mobilnych. max-w-md (448 px) jest idealne dla okien modalnych i formularzy. max-w-2xl (672 px) pasuje do treści artykułów. max-w-4xl (896 px) sprawdza się w obszarach zawartości paneli. Znajomość tych rozmiarów ułatwia wybór właściwego ograniczenia bez mierzenia pikseli.

min-h-* zapewnia elementowi co najmniej określoną wysokość, nawet gdy zawartość jest skąpa. min-h-screen (100vh) to standardowe rozwiązanie dla opakowań strony, zapobiegające powstawaniu pustego miejsca pod stopką na krótkiej stronie. min-h-0 pozwala elementom podrzędnym flex zmniejszyć się poniżej ich rozmiaru wewnętrznego, co jest przydatne w układach flex zawierających przepełnienie.

max-h-* ogranicza maksymalną wysokość, do której może rozrosnąć się element. Jest to niezbędne w przypadku przewijanych menu rozwijanych i paneli, które nie powinny zajmować całego ekranu. Wzorzec max-h-60 overflow-y-auto jest standardowym rozwiązaniem dla menu rozwijanych — wyświetla opcje na wysokości do 15 rem, a jeśli jest ich więcej, pokazuje pasek przewijania. Bez max-h-* menu rozwijane zawierające 200 elementów zakryłoby całą stronę.

Najbardziej elastyczne podejście do określania rozmiaru polega na połączeniu min-w-*, max-w-* i szerokości bazowej. Ogólna zasada CSS jest następująca: element dąży do osiągnięcia szerokości bazowej, ale min-w nie pozwala mu stać się mniejszym, a max-w — większym. Tworzy to płynny zakres dopasowujący się jednocześnie do zawartości i obszaru widoku.

Klasy Tailwind max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl i max-w-screen-2xl ustawiają wartości max-width dokładnie odpowiadające responsywnym punktom przerwania. Pozwala to tworzyć kontenery ograniczane do bieżącego punktu przerwania — jest to przydatne w przypadku teł sekcji rozciągających się na całą szerokość, podczas gdy wewnętrzna zawartość pozostaje ograniczona do granicy punktu przerwania.

Ograniczenia mogą różnić się w zależności od punktu przerwania. Typowy wzorzec max-w-full sm:max-w-md lg:max-w-lg stosuje się w oknie modalnym: na urządzeniach mobilnych wypełnia ono ekran, na małych tabletach jest ograniczone do 448 px, a na dużych ekranach — do 512 px. Zapobiega to nadmiernemu rozciąganiu okna na komputerach, a jednocześnie zapewnia wygodę użycia na urządzeniach mobilnych bez poziomego przewijania.

Obrazy responsywne szczególnie dobrze korzystają z ograniczeń minimalnych i maksymalnych. Ustawienie max-w-full na obrazach zapobiega ich wystawaniu poza kontener na małych ekranach, a min-w-0 pozwala im zmniejszyć się poniżej naturalnego rozmiaru w kontekście flex. Klasa object-cover w połączeniu z ograniczeniami wysokości tworzy popularny efekt miniatur stosowany w komponentach kart.

W tej lekcji poznali Państwo: max-w-prose ogranicza szerokość tekstu do wygodnych 65 znaków w wierszu, min-h-screen wraz z flex-col i flex-1 tworzy wzorzec stopki przyklejonej do dołu oraz max-h-* wraz z overflow-y-auto to standardowe rozwiązanie dla przewijanych menu rozwijanych i paneli. Następnie omówimy narzędzia proporcji obrazu służące do zachowywania proporcjonalnych wymiarów.