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, щоб встановити пропорційний розмір елемента.

автор: Bond

Нотатка: Функція fit-content() часто використовується разом з іншими CSS властивостями, такими як grid-template-columns, grid-template-rows, flex-basis, тощо, для створення гнучкого макету, який адаптується до розміру вмісту.
автор: Bond
Нотатка: У функції fit-content() можна використовувати значення довжини або відсотка для задання максимальної ширини або висоти елемента. Наприклад, fit-content(50%) обмежить розмір елемента до половини ширини або висоти контейнера.
автор: Bond
Нотатка: Варто відзначити, що підтримка функції fit-content() може залежати від браузера і може бути обмежена на деяких платформах або версіях. Для докладнішої інформації про підтримку і сумісність функції fit-content() рекомендується перевірити секцію "Переглядачі".
автор: Bond

Синтаксис

fit-content(<length-percentage>);

Функція fit-content може отримувати єдине значення:

<length-percentage>

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

автор: Bond

Значення без задання:	0%

Переглядачі

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

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

Приклади

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

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!