Урок 27 із 104
26%
← Назад

Функції вибору одного зі значень у CSS

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

Функції max() і min() у CSS

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

  • max() — повертає найбільше значення.
  • min() — повертає найменше значення.

Функція max()

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


  .block {
  width: max(300px, 50%);
}

У цьому прикладі ширина блоку буде 300px або 50% — залежно від того, яке значення більше.


<div class="block">
  Block
</div>

.block {
  width: max(300px, 50%);
  height: 100px;
  background-color: lightblue;
}

Функція min()

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

.block {
  width: min(400px, 30%);
}

У цьому прикладі ширина блоку буде 400px або 30% — залежно від того, яке значення менше.

❗ Важливо:

max() і min() часто використовують у адаптивній верстці разом із %, px, rem та іншими одиницями вимірювання.

Практичні завдання

📌 Завдання:
  1. №1. Дан блок.
  2. Зробіть його ширину 300px або 50% — залежно від того, яка величина більша.
  3. Використайте функцію max().

<div class="block">
  Block
</div>
💡 Показати підказку

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

✅ Показати відповідь

.block {
  width: max(300px, 50%);
}
📌 Завдання:
  1. №2. Дан блок.
  2. Зробіть його ширину 400px або 30% — залежно від того, яка величина менша.
  3. Використайте функцію min().

<div class="block">
  Block
</div>
💡 Показати підказку

Функція min() повертає найменше значення з переданих варіантів.

✅ Показати відповідь

.block {
  width: min(400px, 30%);
}