Кратко
Секция статьи "Кратко"Функция min
возвращает наименьшее из перечисленных через запятую значений внутри круглых скобок.
Пример
Секция статьи "Пример".selector { width: min(50%, 500px);}
.selector { width: min(50%, 500px); }
Как пишется
Секция статьи "Как пишется"Функция принимает одно или несколько значений разделённых запятой, так же поддерживается вложенность других функций, например calc():
.selector { width: min(50%, calc(1000px / 2), 700px);}
.selector { width: min(50%, calc(1000px / 2), 700px); }
Использовать функцию можно в любых CSS-свойствах, значение которых является числом, например:
.selector { background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);}
.selector { background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db); }
Как это понять
Секция статьи "Как это понять"При отрисовке браузер определяет минимальное значение и подставляет его в стили.
В примере выше использованы значения min
, что буквально означает: элемент занимает половину ширины вьюпорта, но не больше 350 px.
Подсказки
Секция статьи "Подсказки"💡 Очень удобно с помощью функции min
ограничивать ширину компонента в зависимости от ширины родителя.