css.in.ua
Підтримати

CSS function max()

Опис

max() - функція в CSS, яка дозволяє встановити максимальне значення з набору числових значень або значень, що підтримують порівняння. Ця функція особливо корисна для властивостей CSS, які потребують задання максимально допустимих значень, таких як ширина (width), висота (height), відступи (margin), поля (padding) та інші.

Функція max() приймає декілька аргументів - числових значень або значень, що підтримують порівняння, і порівнює їх між собою, повертаючи найбільше з них. Наприклад:

Приклад використання:

Допустимо, нам потрібно встановити максимальну ширину блока, але при цьому врахувати декілька можливих значень. Ми можемо використати функцію max() для цього:

width: max(200px, 300px, 150px);

У цьому прикладі, з урахуванням переданих значень, ширина блока буде встановлена на 300px, оскільки воно є найбільшим серед усіх переданих значень.

Функція max() дозволяє ефективно використовувати найбільше значення зі списку аргументів і забезпечує більшу гнучкість при заданні максимальних значень для властивостей CSS.

Порада:

Використовуйте функцію max() для зручного визначення максимального значення серед декількох варіантів. Це особливо корисно, коли ви хочете встановити властивість залежно від доступного простору або інших факторів.
Порада:

Функція max() також може бути поєднана з іншими функціями та математичними операціями, що дозволяє виконувати складні обчислення над значеннями.
Нотатка:

Пам'ятайте, що функція max() працює тільки зі значеннями, що можуть бути порівняні. Наприклад, вона не застосовується до рядків або кольорів.

Синтаксис

max(value1, value2, value3, ...);
<expression>

Ви можете використовувати будь-який допустимий CSS вираз, такий як calc(), var(), rgba(), і так далі, які повертають числові значення.

<number>

Числові значення, які можуть бути вказані з одиницями вимірювання, такими як пікселі (px), відсотки (%), em або rem. Функція min() порівняє числові значення і поверне найменше з них.

Переглядачі

Переглядач

79

75

11.1

66

79
Переглядач

79

79

79

11.3

Мобільних переглядачів ще не додано.

Приклади


При наведенні курсору на елемент, він змінює розміри.

Маємо два однакових елементи, але один з них має більшу ширину через використання функції max().

Документи

Зв'язок