max-width

CSS-властивість max-width визначає максимальну ширину елемента, тобто найбільшу ширину, до якої елемент може бути розтягнутий. Вона дозволяє контролювати ширину елементів, запобігаючи їхньому надмірному розширенню, навіть якщо контейнер або вікно браузера має дуже великий розмір. Це важливо для забезпечення адаптивності елементів і коректного відображення на великих екранах.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США

Синтаксис

max-width: <length> | <percentage> | max-content | min-content | fit-content | none;

Значення

  • <length> — фіксоване значення максимального розміру в одиницях виміру, таких як px, em, rem тощо, навіть якщо контейнер має більшу ширину.
  • <percentage> — максимальна ширина елемента в відсотках від ширини батьківського елемента.
  • max-content — максимальна ширина елемента буде рівною ширині найбільшого елемента, який в ньому міститься, без переносу (якщо є великий текст або зображення).
  • min-content — встановлює максимальну ширину елемента, при якій весь вміст ще можна розмістити без обрізання, надаючи елементу мінімально необхідну ширину для вмісту.
  • fit-content — ширина елемента підлаштовується під вміст, але не перевищує доступний простір контейнера.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • max-width дозволяє обмежити ширину елемента, не дозволяючи йому розтягуватися за межі заданого значення. Вона особливо корисна для елементів, які повинні адаптуватися до розміру екрану чи контейнера, але не повинні виходити за певні межі.
  • Властивість max-width часто комбінується з min-width для створення діапазону можливих розмірів елемента. Це дозволяє контролювати елементи на різних пристроях і з різними розмірами екранів.
  • Використання max-width з width дозволяє задати фіксовану ширину елемента, але з обмеженням максимального розміру.
  • Значення fit-content дає змогу контролювати елементи так, щоб їх ширина відповідала вмісту, але не перевищувала заданих обмежень.
  • max-width підтримується всіма сучасними браузерами.