max()

Функция, выбирающая наибольшее значение.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Функция max() возвращает наибольшее из перечисленных через запятую значений внутри круглых скобок.

Пример

Секция статьи "Пример"
        
          
          .container {  width: max(50%, 500px);}
          .container {
  width: max(50%, 500px);
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Функция принимает одно или несколько значений, разделённых запятой. Так же в ней поддерживается вложенность других функций, например min():

        
          
          .text {  font-size: max(2rem, min(1vw, 1em));}
          .text {
  font-size: max(2rem, min(1vw, 1em));
}

        
        
          
        
      

Для вычислений внутри функции не обязательно использовать calc(), все математические операции будут работать:

        
          
          .container {  width: max(50% - 40px, 400px);}
          .container {
  width: max(50% - 40px, 400px);
}

        
        
          
        
      

Использовать функцию можно в любых CSS-свойствах, значение которых является числом, например:

        
          
          .container {  background: linear-gradient(135deg, #2c3e50, #2c3e50 max(20vw, 60%), #3498db);}
          .container {
  background: linear-gradient(135deg, #2c3e50, #2c3e50 max(20vw, 60%), #3498db);
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

При отрисовке браузер определяет максимальное значение и подставляет его в стили.

Открыть демо в новой вкладке

В примере использованы значения max(4.5vw, 18px). Это означает, что размер текста составляет 4.5% от ширины вьюпорта, но не менее 18 px. Чем больше ширина экрана, тем больше текст.

Подсказки

Секция статьи "Подсказки"

💡 С помощью функции max() очень удобно ограничивать ширину компонента в зависимости от ширины родителя.

💡 При помощи max() можно ограничить значение снизу.