css властивість flex-shrink


Властивість flex-shrink встановлює коефіцієнт стиснення гнучких елементів в контейнері по відношенню до інших гнучких елементів в тому ж контейнері, якщо в ньому залишається вільний простір. Гнучкі елементи автоматично зменшують свою ширину, якщо вона більша за ширину батьківського елементу.

Властивість `flex-shrink`

Вказує "коефіцієнт стиснення", який визначає, на скільки елемент зменшиться відносно решти елементів у гнучкому контейнері, якщо в рядку недостатньо місця.

Якщо цей параметр опущений, його значення без задання дорівнює 1, а коефіцієнт стиснення зменшується під-час розподілу негативного місця.

У гнучкому контейнері, нащадки можуть бути розташовані у будь-якому напрямку, і можуть змінювати власні розміри: збільшувати, щоб заповнити батьківський елемент, або зменшувати, щоб не вилізти за його межі.

Приймаються цілі (1, 2, 3, ...) або дробові числа (наприклад: 0.6). Негативні значення ігноруються.

Нотатка:

Властивість flex працює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивість display встановлена як flex (display: flex; або display: inline-flex).

Нотатка:

Рекомендується застосовувати властивість flex для скороченого запису, а не flex-grow, flex-shrink і flex-basis окремо.

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

Синтакс

flex-shrink: number|initial|inherit;

Властивість flex-shrink може отримувати 3 значення:

number

Коефіцієнт стиснення гнучкого елемента в контейнері. Має бути цілим числом. Від`ємні значення заборонені.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: 1
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.flexShrink="5"

Переглядачі

Переглядач
flex-shrink

29.0

11.0

28.0

9.0

12.1

13.0

Переглядач
flex-shrink

4.4

28.0

9.2

Приклади


Демонстрація дії різних значень властивості

Простий приклад роботи властивості

Приклад роботи властивості

Динамічний приклад

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів