min()
Wybiera najmniejszą z podanych wartości. Działa jak górny limit, np. szerokość 100% rodzica, ale nie więcej niż 600px.
Przykład
#.container {
width: min(100% - 2rem, 480px);
margin-inline: auto;
}<div class="container stage">
<strong>Kolumna treści</strong>
<p style="margin: 4px 0 0; color: #a1a1aa;">Na szerokim ekranie ma 480 px i stoi na środku. Na wąskim zostawia po 1rem marginesu z każdej strony.</p>
</div>Na komputerze wygrywa 480px. Na telefonie 100% - 2rem jest mniejsze, więc kolumna wypełnia ekran z odstępem 1rem po bokach.
Definicja i zastosowanie
#Funkcja min() przyjmuje dowolną liczbę wartości oddzielonych przecinkami i zwraca najmniejszą. Jej sens widać, gdy mieszasz jednostki: width: min(100%, 600px) oznacza „cała szerokość rodzica, ale nie więcej niż 600 pikseli”. Na telefonie wygrywa 100%, na szerokim ekranie 600px.
Łatwo się pomylić, bo nazwa sugeruje dolną granicę, a jest odwrotnie: min() ustala maksimum. Jeśli wartość ma rosnąć tylko do pewnego pułapu, to właśnie min(). Zapis width: min(100%, 600px) robi to samo co para width: 100%; max-width: 600px;, tylko w jednej deklaracji.
W argumentach wolno pisać działania bez calc(), np. min(100% - 2rem, 60ch), i używać zmiennych. Funkcja działa w każdej właściwości, która przyjmuje liczby, długości, procenty, kąty albo czas: w width, padding, font-size, gap, a także wewnątrz minmax() w siatce.
Składnia
#min(<wartość>, <wartość> [, <wartość>]*)Typowe zastosowania
#220px, w wąskiej ramce 100%
Górny limit szerokości. Ramka jest szersza niż 220 px, więc kafelek ma 220 px. Przeciągnij prawy dolny róg ramki w lewo: gdy zrobi się węższa, kafelek zajmie 100%.180px albo 100% - 40px
Działanie w argumencie, bez pisaniacalc(). W szerokiej ramce kafelek zatrzymuje się na 180 px, a w wąskiej zostawia po prawej 40 px wolnego miejsca.26ch
Wygodna długość wiersza. Akapit ma najwyżej 26ch szerokości, a w węższej ramce po prostu ją wypełnia, zamiast wystawać.kolumny od 90px
Bezpieczna siatka. Kolumny mają co najmniej 90 px, ale gdy ramka jest węższa, minimum spada do 100% i nic nie wychodzi poza krawędź. Zwęż ramkę, a kafelki przejdą do jednej kolumny.
Typowe zastosowania w praktyce
#min(100%, 220px)
.demo { width: min(100%, 220px); }min(100% - 40px, 180px)
calc(). W szerokiej ramce kafelek zatrzymuje się na 180 px, a w wąskiej zostawia po prawej 40 px wolnego miejsca..demo { width: min(100% - 40px, 180px); }min(26ch, 100%)
.demo { width: min(26ch, 100%); margin: 0; }minmax(min(90px, 100%), 1fr)
.demo {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(min(90px, 100%), 1fr));
gap: 8px;
}Obsługa przeglądarek
#Szeroko dostępne · od 2020 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zapamiętaj:
min()wyznacza górny limit, amax()dolny. Wynikmin()nigdy nie przekroczy najmniejszego z argumentów. - Zapis
width: min(100%, 600px)zastępuje paręwidth: 100%imax-width: 600px. - W siatkach z
repeat(auto-fill, …)zapisuj minimum kolumny jakomin(200px, 100%). Na bardzo wąskim ekranie kolumna nie wyjdzie poza rodzica.
Powiązane hasła
#- max()Wybiera największą z podanych wartości. Działa jak dolny limit, np. odstęp 5% szerokości, ale nigdy mniej niż 16px.
- clamp()Trzyma wartość w przedziale od minimum do maksimum, a pomiędzy pozwala jej płynnie rosnąć. Podstawa płynnej typografii.
- calc()Wylicza wartość z działania matematycznego i pozwala łączyć różne jednostki, na przykład procenty z pikselami.
- max-widthUstala maksymalną szerokość, powyżej której element się nie rozciągnie.
- widthUstawia szerokość elementu.
- repeat()Powtarza wzór kolumn lub wierszy siatki. Z auto-fill lub auto-fit i minmax() tworzy responsywną siatkę bez media queries.
Widzisz błąd albo brakuje przykładu? Napisz do nas.