CSS max() — найбільше з переданих значень

Опис

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

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

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

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

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

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

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

правити

Загальний опис

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

max(value1, value2, value3, ...);

Функція max може отримувати 2 значень:

<number>

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

автор: Bond

правити

<expression>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	79	75	11.1	66	79	—

Підтримка: мобільні переглядачі

Переглядач
	79	79	79	11.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 2</h2>
  <p>Маємо два однакових елементи, але один з них має більшу ширину через використання функції max().</p>
</div>

<div id="result">
  <div class="container">
    <div class="box"></div>
    <div class="box max"></div>
  </div>
</div>

#description {
  background-color: lightgray;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-right: 20px;
}

.box.max {
  width: max(150px, 200px);
  background-color: red;
}

<div id="description">
  <h2>Приклад 1</h2>
  <p>При наведенні курсору на елемент, він змінює розміри.</p>
</div>

<div id="result">
  <div class="container">
    <div class="box"></div>
  </div>
</div>

#description {
  background-color: lightgray;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-right: 20px;
  transition: background-color 0.3s ease;
}

.box:hover {
  background-color: darkblue;
  width: max(150px, 200px);
  cursor: pointer;
}

<div id="description">
  <h2>max() задає нижню межу</h2>
  <p>Контейнер має ширину 400px. У кожної смужки ширина — max(відсоток, 120px), тому вужчою за 120px вона не стане.</p>
</div>

<div id="result">
  <div class="box">
    <div class="bar b10"></div>
    <p>width: max(10%, 120px) → 120px</p>
    <div class="bar b30"></div>
    <p>width: max(30%, 120px) → 120px</p>
    <div class="bar b50"></div>
    <p>width: max(50%, 120px) → 200px</p>
    <div class="bar b90"></div>
    <p>width: max(90%, 120px) → 360px</p>
  </div>
</div>

#description {
  background: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  padding: 24px;
  font-family: Arial, sans-serif;
}

.box {
  width: 400px;
  border: 2px dashed #999;
  padding: 12px;
}

.bar {
  height: 28px;
  background: #ff6347;
  border-radius: 4px;
}

.b10 { width: max(10%, 120px); }
.b30 { width: max(30%, 120px); }
.b50 { width: max(50%, 120px); }
.b90 { width: max(90%, 120px); }

#result p {
  margin: 6px 0 16px;
  font-size: 13px;
  color: #555;
}