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

CSS function minmax()

Опис

Функція minmax() в CSS надає можливість визначити динамічний діапазон значень для таких параметрів, як ширина, висота або інший розмір елемента. Це може бути неймовірно корисним у створенні адаптивних макетів, які відповідають різним розмірам екрану або контейнерів. Функція приймає два аргументи: minimum та maximum, і результатом буде значення, яке знаходиться між ними, з урахуванням більшого з двох параметрів.

Ось простий приклад її використання:

grid-template-columns: minmax(200px, 400px);

У цьому прикладі елемент сітки матиме ширину від 200px до 400px, залежно від доступного простору. Це дає гнучкість у відображенні елемента, адаптуючи його до різних розмірів екрану.

Значення, які можна використовувати для minimum та maximum, залежать від властивості CSS, до якої ви застосовуєте функцію minmax(). Наприклад, для властивостей, що визначають ширину (width), можна використовувати значення, які приймаються для ширини елемента.

Нотатка:

Ця функція особливо корисна в контексті сіток (grid) та резинових макетів (flexbox), де елементи повинні адаптуватися до різних розмірів екрану або контейнерів. Використовуючи minmax(), можна забезпечити, що дизайн залишається зрозумілим та ефективним на всіх пристроях і розмірах екрану.
Нотатка:

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

Експериментуйте з різними значеннями minimum та maximum, щоб знайти оптимальні параметри для вашого дизайну.

Синтаксис

minmax(minimum, maximum);
<minimum>

Значення, що визначає мінімальну ширину, довжину або розмір елемента. Може бути вказане у пікселях (px), відсотках (%), вьюпортах (vw), елементах шрифту (em, rem), тощо.

<maximum>

Значення, що визначає максимальну ширину, довжину або розмір елемента. Може бути вказане у пікселях (px), відсотках (%), вьюпортах (vw), елементах шрифту (em, rem), тощо.

Переглядачі

Переглядач

57

52

10.1

44

16
Переглядач

57

57

52

10.3

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

Приклади


Коли на сторінці є достатньо місця, колонки будуть мати ширину 1fr (розподілені рівномірно). Але, якщо ширина сторінки зменшується і не вистачає місця, колонки зберігатимуть мінімальну ширину 200px.

Документи

Зв'язок