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

CSS function fit-content()

Опис

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

Ось короткий приклад використання функції fit-content():

.container {
  width: fit-content(200px);
  height: fit-content(150px);
  background-color: lightblue;
}

У цьому випадку, контейнер, позначений класом .container, має властивості width і height, які використовують функцію fit-content() з обмеженнями 200 пікселів для ширини та 150 пікселів для висоти. Це означає, що контейнер автоматично займе мінімальний можливий розмір, що вміщує його вміст, але не перевищує вказаних обмежень. Фон контейнера встановлено світло-синім кольором для наглядності.

fit-content() може бути надзвичайно корисною, коли потрібно створити контейнер, який займає мінімальний можливий розмір, що вміщує його вміст, але не перевищує заданого обмеження. Ця функція зазвичай використовується разом з властивостями width або height, щоб встановити пропорційний розмір елемента.

Нотатка:

Функція fit-content() часто використовується разом з іншими CSS властивостями, такими як grid-template-columns, grid-template-rows, flex-basis, тощо, для створення гнучкого макету, який адаптується до розміру вмісту.
Нотатка:

У функції fit-content() можна використовувати значення довжини або відсотка для задання максимальної ширини або висоти елемента. Наприклад, fit-content(50%) обмежить розмір елемента до половини ширини або висоти контейнера.
Нотатка:

Варто відзначити, що підтримка функції fit-content() може залежати від браузера і може бути обмежена на деяких платформах або версіях. Для докладнішої інформації про підтримку і сумісність функції fit-content() рекомендується перевірити секцію "Переглядачі".

Синтаксис

fit-content(<length-percentage>);
<length-percentage>

Довжина або відсоток, які вказують максимальну ширину або висоту елемента. Можна використовувати значення, такі як px, em, rem, vw, vh, vmin, vmax, відсотки, тощо. Це значення встановлює максимальну межу розміру елемента.

Переглядачі

Переглядач

57

52

10.1

44

16
Переглядач

57

57

52

10.3

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

Приклади


Цей приклад демонструє, як використовуючи функцію fit-content() в поєднанні з CSS-сіткою, можна створити адаптивний макет сайту, де елементи змінюють свої розміри та розташування залежно від доступного простору.

Документи

Зв'язок